본문 바로가기
부트캠프교육중/react

react 데이터흐름

by 뭉지야 2023. 1. 26.
728x90

# react의 개발방식의 가장 큰특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이다!!

#상향식(bottom-up)으로 앱을 만든다
-먼저 컴포넌트를 만들고, 다시 페이지를 조립해나간다
-상향식의 가장 큰 장점은 테스트가 쉽고 확장성이 좋다.
-그래서 앱의 디자인을 전달받고나면, 컴포넌트 계층구조로 나누는 것이 가장 먼저 해야할일이다!

#데이터를 전달하는 주체는 부모컴포넌트가 된다. 
이는 데이터 흐름이 하향식(top-down)임을 의미한다.
데이터는 위에서 아래로 흐른다.
리액트는 단방향 데이터 흐름(one way data flow)을 따른다.

#state는 최소화하는 것이 가장 좋다. state가 많아질수록 애플리케이션은 복잡해진다.

#이러면 state가 아니다
-부모로부터 props를 통해 전달됩니까? 그러면 state가 아니다
-시간이 지나도 변하지 않나요? 그러면 state가 아니다
-컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그러면 state가 아니다

#하나의 상태를 기반으로 두 컴포넌트가 영향을 받는다면 
두개의 자식 컴포넌트가 하나의 상태에 접근하고자 할때는 두 자식의 공통 부모 컴포넌트에 상태를 위치해야한다.

#리액트에서 데이터를 다룰때는 컴포넌트들 간의 상호관계와 데이터의 역할, 데이터의 흐름을 고려하여
위치를 설정해야 한다.

728x90

'부트캠프교육중 > react' 카테고리의 다른 글

Side Effect  (0) 2023.02.02
상태끌어올리기  (0) 2023.02.02
controlled Component  (0) 2023.01.26
이벤트처리  (0) 2023.01.26
state  (0) 2023.01.26