useState쓰는법 (Once state got updated, the component re-renders.) 상태는 반드시 갱신함수를 통하여 갱신할것. 그렇지 않으면 리렌더링이 일어나지 않는다.
state는 다른 컴포넌트에게 프롭스로 내려줄수있다. 또한 프롭스로 콜백함수를 내려주어서 부모컴포넌트의 상태를 자식이 바꿔줄수도있다.
자식 컴포넌트는 자신이 받은 props가 어디서 왔는지를 전혀 모르고 사용하기만 할 뿐이다. 심지어 그게 props인지도 모르고 state인지도 모를때가 많다.
기존의 리액트와 순수JS(다른 말로는 바닐라 JS)에서의 상태 관리를 훨씬 더 단순한 구문으로 관리를 가능케 한다. 상태들에 대한 데이터들을 조금 더 편리하게 관리하고자 등장한 개념이다.
만약에 수많은 형제 컴포넌트들이 있고, 이 모든 컴포넌트들이 동일한 상태를 주고받을 경우, 다 하나의 부모 컴포넌트를 거쳐야 한다. 리액트만으로 이 부분을 구현하기에는 로직이 굉장히 복잡해지고, 구조와 상태가 분리되지 않아 유지보수가 힘들어진다.
리덕스는 모든 컴포넌트에서 동일하게 접근할 수 있고 영향을 받을 수 있는 **전역 상태(저장소)**를 만들어서 사용하기 때문에 상태 끌어올리기 및 props drilling(원치 않은 중간 단계의 컴포넌트에게도 props를 내려주는 현상) 문제도 막을 수 있다
참고: Presentational 컴포넌트(dumb component)와 Container 컴포넌트(smart component)의 개념. 처음부터 계획하고 만들어야 하는 컴포넌트가 아니고, 만들어 놓고 보니 이런 컴포넌트로 분류할 수 있더라.. 정도로 알아두자.
이름 그대로 전자는 디자인, 실제 구조, 스타일을 보여주기 위한 컴포넌트로서, store의 상태 변수에 접근할수없다.
container 컴포넌트의 경우에는 상태를 가질 때가 많다. 디자인, 스타일에 대한 정보는 철저히 배제하고 오로지 store에만 접근하여 데이터를 다룰 수 있다. 다른 container컴포넌트나 preesentational 컴포넌트를 같이 감싸는 용도로 쓴다.
이렇게 해서, 상태와 디자인을 분리. => 재사용성 높임.
컨테이너 컴포넌트로 다뤄야 하는것들: 페이지,리스트,헤더,사이드바, 내부의 컴포넌트 때문에 props가 여러 컴포넌트를 거쳐야 하는 경우