State Lifting

한승진·2022년 12월 22일
0

codecamp

목록 보기
7/11

React의 데이터 흐름은

상위 컴포넌트에서 하위 컴포넌트로 전달하는

**하향식**, **단방향 데이터 흐름**을 따르고 있습니다.

그렇다면 **단방향 데이터 흐름의 장점**은 무엇일까요?

우선, 기능 변경 사항에 대한 코드 수정이 적어집니다.

또한 복잡하지 않아 코드의 흐름을 알기 쉽다는 점입니다.

하지만 **단방향 데이터 흐름의 단점**도 존재합니다.

다음과 같은 경우를 가정해봅시다.

단방향 데이터 흐름

위와 같은 구조에서 자식 컴포넌트1의 state를 자식 컴포넌트2에서 보여주는 것**불가능**합니다.

또한, 자식 컴포넌트2의 state를 부모 컴포넌트에서 보여주는 것**불가능**합니다.

자식 컴포넌트의 state와 setState를 **부모 컴포넌트로 끌어올려 선언**해주면 됩니다.

그리고 **props**로 내려줄 경우, 자식 컴포넌트1, 2에서 모두 state를 사용할 수 있게 됩니다.

profile
프론트엔드 개발자

0개의 댓글