리액트 컴포넌트 간 정보 공유의 조건

만난 문제

이번에 프론트를 하면서 가장 고민을 많이 했던 부분이 "컴포넌트 간에 정보를 어떻게 전달할 것인가"이다.
리액트 컴포넌트 간 정보 공유의 조건을 잘 이해하고 있어야, 프론트의 전체적인 구조(컴포넌트 간의 계층 구조)를 잘 짤 수 있다. 이번 해커톤을 통해 가장 크게 배운 것이 있다면 바로 "컴포넌트 간 구조 짜는 법"이다.

문제 해결 방법

👉 리액트 컴포넌트 간 정보 공유의 조건

(1) 부모-자식 관계

부모 컴포넌트는 자식 컴포넌트에 props를 통해 정보를 전달한다.
자식 컴포넌트는 props로 전달받은 함수의 매개변수를 통해 부모 컴포넌트에 정보를 전달할 수 있다.

(2) 형제 관계

공통의 부모를 통해 정보를 주고 받을 수 있다.
부모 컴포넌트에서 상태를 정의하고, 형제 컴포넌트들은 부모로부터 상태를 전달받는다.

(3) useNavigate 또는 Link로 연결

useNavigate 또는 Link로 연결되어 있을 경우, state를 통해 연결된 페이지에 정보를 전달할 수 있다.

(4) 상태 관리 라이브러리

리액트의 상태 관리 라이브러리(예: Redux, Zustand, Recoil 등)를 사용하면, 컴포넌트 계층 구조와 무관하게 전역 상태를 관리하고 공유할 수 있다.

상태 관리 라이브러리에 대해서는 세미나에서 배우지 않았어서 아직 잘 모른다. 그러나 상태 관리 라이브러리를 사용하는 경우에도 기본적으로 컴포넌트 계층 구조를 잘 짜두는 것이 좋지 않을까 싶다.

이번 해커톤을 시작할 때는 이런 컴포넌트 간 정보 공유의 조건을 잘 몰라서 해커톤을 진행하며 구조를 바꾸는 일이 많았다. 앞으로는 컴포넌트 간의 관계, 서로 공유해야 할 정보가 무엇인지를 미리 어느 정도 고민한 뒤에 구조를 짜봐야겠다!

앞으로 더 공부할 것

• 상태 관리 라이브러리