[리액트] 리액트의 단방향 데이터 흐름

리액트의 단방향 데이터 흐름

리액트의 데이터 흐름은 단방향이다.
즉 상위 부모컴포넌트에서 하위 자식 컴포넌트로 props를 통해 전달이 되며 반대로는 전달할 수 없다.

이러한 리액트의 단방향 데이터흐름은 다음과 같은 장점을 갖는다.

1. 예측 가능한 데이터 흐름: 어떤 컴포넌트에서 데이터가 변경되었는지를 추적하기 쉽고, 버그를 찾고 수정하기가 간편해진다.

2. 컴포넌트의 독립성: 각각의 하위 컴포넌트는 상위 컴포넌트로부터 데이터를 전달받기 때문에, 각 컴포넌트는 자체적으로 독립적으로 동작할 수 있습니다. 이는 컴포넌트를 재사용하기 쉽게 만들며, 코드의 유지 보수와 테스트를 용이하게 한다.

3. Virtual DOM과의 궁합: 단방향 데이터 흐름을 사용하면 React가 데이터 흐름을 추적하고 컴포넌트 간의 관계를 파악하여 변화된 부분를 빠르게 판별하여 빠른 재랜더링을 가능케 한다.

하위컴포넌트에서 상위컴포넌트의 상태를 변경하고자 하면??

1. 상위 컴포넌트에 스테이트를 새롭게 만들고 props로 전달한다.

2. 상위 컴포넌트에 정의된 상태를 변경하는 함수(handler) 자체를 하위컴포넌트에 props로 전달하고, 하위 컴포넌트에서 이 콜백 함수를 실행한다. 이러면 단방향 데이터 흐름의 원칙을 지킬 수 있음.

3. 전역상태 관리 툴 활용.