오늘의 개발 문제 : React props 화면에 아무것도 안 보인다...

오늘은 React에서 컴포넌트끼리 데이터를 주고받는 방법인 Props를 배우고 다뤄봤다. 겉보기엔 간단해 보였는데, 막상 코드 작성을 해보니 익숙하지 않은 부분들이 있었고 자식컴포넌트에 제대로 props를 전달하지 못해 아예 빈 화면이 나오는 상황도 있었다.

처음 문제는 내가 데이터를 보냈다고 착각하고 있었다는 거였다. 부모 컴포넌트에서 로그인 상태만 자식에게 전달했는데, 정작 자식 컴포넌트는 로그인 버튼을 눌렀을 때 실행할 함수까지 기대하고 있었다. 

두 번째로 겪은 문제는 더 근본적이었다. 자식 컴포넌트가 부모로부터 로그인 상태를 Props로 받으면서, 동시에 자기 자신도 useState로 로그인 상태를 관리하고 있었던 것이다. 결과적으로 같은 데이터를 두 곳에서 관리하는 상황이 됐고, 당연히 둘은 따로 놀았다. 부모의 상태가 바뀌어도 자식은 자기 상태만 보고 있으니 화면이 갱신되지 않았다.

이 문제를 해결하면서 "상태 끌어올리기"라는 개념을  이해하게 됐다. 여러 컴포넌트가 같은 데이터를 공유해야 한다면, 그 데이터는 공통 부모에서 관리하고, 자식들은 그냥 Props로 받아서 보여주기만 하면 된다.