개념/React
[React] state 쓰는 법
칠뎁
2022. 8. 2. 13:40
⬆️상향식으로 만들고 ⬇️하향식으로 흐른다.
- React는 상향식(bottom-up)으로 컴포넌트를 설계한다.
- React의 데이터 흐름은 하향식(top-down)이다.
컴포넌트를 만들때 하나의 컴포넌트는 하나의 일만 한다는 "단일 책임 원칙"에 맞게 잘게 쪼갠어서,
작은 단위로 일을한다.
때문에 테스트가 쉽고, 확장성이 좋다.
또한 이렇게 만들어지는 컴포넌트들 사이에서
부모 컴포넌트는 props를 이용해서 자식 컴포넌트에게 props를 부여한다.
만들때와 반대되게, 데이터의 흐름은 '하향식'이라고 볼 수 있는 것이다.
이를 단방향 데이터 흐름(one-way data flow)라고 부른다.
🙄어떤 것을 state로 두어야 할까
state가 많을 수록 어플리케이션이 복잡해지므로, 꼭 필요한 것만 state로 두는 것이 좋다.
- 부모로부터 props를 통해 전달됨 -> state가 아님
- 시간이 지나도 변하지 않음 -> state가 아님
- 컴포넌트 안의 다른 state나 props를 가지고 계산함 ->state가 아님
++추가로, state가 변함에 따라 랜더링이 되는 화면이 달라지는 것을 state에 넣는다고 생각해도 좋을 듯 싶다.
🫡어디에 state를 두어야할까
- 하나의 state를 기반으로 여러개의 컴포넌트가 영향을 받는다면, 공통의 부모 컴포넌트를 찾아 그곳에 state를 두어야한다.
🫣관련글
-[React] State and Props + 이벤트핸들링