[React] 리액트의 데이터 흐름

리액트에서 데이터의 전달 방향

 

리액트에서 데이터와 이벤트 전달 방향

 

리액트는 State 값이나 set 함수를 여러 컴포넌트에서 사용하는 경우, 이들을 상위 컴포넌트에서 관리한다. 리액트에서는 이 기능을 다른 말로 'State 끌어올리기(State Lifting)'라고 한다. 리액트는 규모가 크고 빠른 웹 애플리케이션을 만들기 좋은 기술이다. 이를 위해 리액트가 권장하는 애플리케이션 설계 방식을 살펴 보자!

 

리액트에서 컴포넌트 간에 데이터를 전달할 때는 Props를 사용하는데 전달 방향은 언제나 부모로부터 자식에게 전달하는 방식이다. 리액트의 이러한 데이터 전달 특징을 '단방향 데이터 흐름'이라고 한다. 반면 State를 변경하는 이벤트는 자식에게 부모를 향해 역방향으로 전달되어야 한다. 

 

데이터를 항상 아래로 전달하는 단방향 데이터 흐름은 모든 자동차가 같은 방향으로만 달리는 일방통행 차선을 연상하게 한다. 모든 자동차가 한 방향으로만 달린다면, 초보 운전자 입장에서는 운전하기가 수월하며, 교통 상황도 한눈에 확인할 수 있어서 편하다. 리액트 단방향 데이터 전달은 데이터의 흐름을 쉽게 이해할 수 있어, 관리하기에 좋다.

 

🌏 결론적으로 리액트 앱을 설계할 때는 데이터는 위에서 아래로, 이벤트는 아래에서 위로 향하도록 설계해야 한다.

 

 

 

📕참고: 한 입 크기로 잘라 먹는 리액트 - 이정환