# 3.0 Understanding State
state는 데이터가 저장되는 곳이다.
데이터가 바뀌면 rerendering하는 과정이 필요하다.
React.js는 새로 rendering하더라도, 전체를 전부 재생성하지 않고 UI에서 바뀐 부분만 업데이트한다! Super CooL!
# 3.1 setState part1
매번 데이터가 바뀔 때마다 rerendering 해줘야 한다. 따라서, React.js 내에서 데이터를 보관하고, 자동으로 rerendering시키는 방법을 배워볼 것이다.
const [counter, modifier] = React.useState(0);
const x = [1, 2, 3]
const [a, b, c] = x // a=1, b=2, c=3
# 3.2 setState part2
Q. 왜 modifier가 필요한가?
modifier를 이용해서 데이터를 바꿨을 때, 값을 업데이트하고 컴포넌트를 rerendering 해주기 때문에 필요하다!
# 3.3 Recap
modifier 함수를 이용해 state(어플리케이션의 데이터)를 바꾸면,
- 데이터가 바뀐다.
- 컴포넌트를 리렌더링해서 새로 생성한다.
(전부 새로 생성되지 않고, 바꾸고 있는 부분만 바뀐다.) - UI를 refresh한다.
# 3.4 State Functions
현재 state를 바탕으로 다음 state를 계산해내고 싶다면, 함수를 이용하는 게 안전하다.
// 안전한 방법, 예상치 못한 업데이트가 일어났다고 하더라도 혼동을 주지 않는다.
setCounter((current) => current + 1)
// 안전하지 않은 방법
setCounter(counter + 1)# 3.5 Inputs and State
*label은 input 앞에 써주는 글씨다.
jsx는 html과 비슷하지만, 다른점이 있다.
- class 대신 className을 사용해야 한다.
- for 대신 htmlFor를 사용해야 한다.
# 3.6 State Practice part1
# 3.7 State Practice part2
# 3.8 Recap
# 3.9 Final Practice and Recap
삶에 변화를 만드는 개발자