https://nomadcoders.co/react-for-beginners
ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders
React for Beginners
nomadcoders.co
<!DOCTYPE html>
<html>
<body id="root"></body>
<!--React import-->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!--React-dom import-->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!--Babel standalone-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function App() {
const data = React.useState();
console.log(data); //[undefined, f] -> undefined는 data, f는 함수(function)
return (
<div>
<h3>Total clicks: 0</h3>
<button>Click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
- React.useState()는 초기값을 설정할 수 있음
ex) React.useState(0) -> [0, f] : 초기값인 0과 data의 값을 바꿀 수 있는 함수가 들어있는 배열을 얻음
=> 이 두 요소가 만나 countUp함수의 역할을 대신하고 있음
=> counter라는 data를 주고, 그 counter 값을 바꿀 수 있는 함수를
- 어떻게 하면 배열에서 요소들을 꺼내서 이름을 부여할 수 있을 것인가?
<State part One>
<!--생략-->
const [counter, modifier] = React.useState(0);
<!--생략-->
const food = ["tomato", "potato"]
const [myFavFood, mySecondFavFood] = food;
따라서
myFavFood
> 'tomato'
mySecondFavFood
> 'potato'
const x = [1,2,3]
const [a, b, c] = x;
따라서
a
>1
b
>2
c
>3
<setState part Two>
- modifier가 필요한 이유는?
<!--생략-->
const [counter, modifier] = React.useState(0);
const onClick = () => {
modifier(987987987);
};
<!--생략-->
button click 결과 => Total clicks: 987987
따라서 ()안에 어떤 값을 부여하던지 modifier함수는 그 값으로 업데이트하고 리렌더링을 일으킴
정리하자면,
React.useState함수는 counter같은 데이터를 숫자형 데이터로 건네주고, 그 데이터 값을 바꿀 함수도 함께 줄것임
그리고 그 함수를 이용해서 데이터를 바꿨을 때, 데이터 값이 바뀌고 컴포넌트도 동시에 리렌더링됨
[counter, modifier] 작성법
- 데이터에 이름 붙일때는 counter처럼 원하는 대로, modifier는 set뒤에 데이터이름을 붙여줌
<!DOCTYPE html>
<html>
<body id="root"></body>
<!--React import-->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!--React-dom import-->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!--Babel standalone-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function App() {
const [counter, setCounter] = React.useState(0);
const onClick = () => {
setCounter(counter + 1);
};
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
<동작 순서>
1. counter라는 데이터를 받아 return()에 그 데이터를 담고 있음 -> ()안은 사용자가 보게 될 컴포넌트
2. button이 클릭되면, counter값을 바꿔줄 함수를 호출 하는데
이때, counter의 새로운 값(counter + 1)을 가지고 해당 함수를 호출
3. 코드를 실행 해보면, 바뀐 부분(숫자부분)만을 업데이트 해줌
※ setState Recap
- modifier 함수를 가지고 state(여기서 state는 counter)를 변경할 때 컴포넌트가 재생성됨
- 새로운 값을 가지고 return도 한번더 실행
- 가장 중요한 것은 state가 바뀌면 리렌더링 발생
'Study > React' 카테고리의 다른 글
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - prop types (0) | 2023.01.17 |
|---|---|
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - Props (0) | 2023.01.17 |
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - State Functions (0) | 2023.01.11 |
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - State (0) | 2023.01.05 |
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - react vs vanila js (0) | 2023.01.03 |
