state는 기본적으로 데이터가 저장되는 곳
어떻게 하면 React.js 어플에 값이 바뀔 데이터를 담아줄 수 있을까?
ReactDOM.render(<Container />, root);Container를 root에 담아준다.
React.js는 UI에서 바뀐 부분만 업데이트 해주고 있다.
React.js는 이전에 렌더링된 컴포넌트는 어떤 것이었는지 확인하고 있다. 그리고 다음에 렌더링될 컴포넌트는 어떤지를 보고 React.js는 다른 부분만 파악한다. 오직 바뀐 부분만 업데이트 하면 된다.
사용자에게 업데이트될 것을 보여주고 싶으면, 새로운 정보를 가지고 컴포넌트를 리렌더링 해줘야 한다.
리렌더링을 유발시키기 위한 React.js가 가진 기능을 배워보자.
React 어프리케이션을 다룰 때, 어디에 데이터를 담으면 될까? 그 전에는 (counter와 같은) 변수에 담았다.
배열의 첫 번째 값은 초기값이고, 두 번째 요소는 그 값을 바꾸는 함수다. 배열은 보기 불편하다.
(h3에서 첫 번째 요소를 사요하려고 한다면,
<h3>Total clicks: {data[0]}</h3>
이렇게 바꿔주어야 한다. 편하진 않다.
어떻게 하면 배열에서 요소들을 꺼내서 이름을 부여할 수 있을까?
이전에는 우리가 직접 리렌더링하고 직접 호출해줬는데, 이제 React.js가 우리를 도와준다.
const [counter, setCounter] = React.useState();에서
React.useState() 는 react기능을 쓸 수있게 해주는 하나의 도구이고,
counter은 현재의 값 state 이며,
setCounter은 이벤트 발생시 변화를 주는 부분이어서 이후 counter로 다시 저장된다.
React.js는 똑똑한 기능을 가지고 있기 때문에 매번 자동으로 바뀌는 리렌더링해준다.
하지만 그냥 똑똑한게 아니라 엄청 똑똑하기 때문에 '실제로 바뀌는 값'만 판단해서 불필요한 리렌더링을 제외한 채로 동작한다 !
