늘 겸손하게

[ React Prop drilling 이슈 ] React에서 자식 컴포넌트에 데이터를 전달하고 싶은 경우 props를 통해 데이터를 간편하게 전달할 수 있습니다. 하지만 깊이 중첩된 자식 컴포넌트에 데이터를 전달하려는 경우에 문제가 생깁니다. 그 문제란, 데이터를 전달하려는 조상 컴포넌트와 데이터를 받으려는 자식 컴포넌트 중간의 많은 컴포넌트들이 모두 props로 데이터를 받고 다시 자식 컴포넌트에 props로 데이터를 전달해야하는 prop drilling을 해야합니다. 만약 전달하려는 데이터가 state라면 어떨까요? 현재 가지고 있는 state값과 다른 state값을 전달받은 컴포넌트는 리렌더링이 일어납니다. 또한 컴포넌트는 변경된 state값을 부모 컴포넌트에 전달하기도합니다. 위와 같은 stat..

Context API 일반적으로 React 데이터는 부모로부터 자식으로 props를 통해 전달됩니다. 하지만 여러 자식 컴포넌트 혹은 깊이가 깊은 트리에서 자식 컴포넌트에 데이터를 전달해야하는 경우에는 이 과정이 번거로울 수 있습니다. Context API는 모든 자식 컴포넌트에 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다. 다른 프로그래밍 언어에서 전역변수와 비슷한 역할입니다. 언제 context를 써야 할까? context는 컴포넌트 트리에서 전역적인 데이터를 공유할 수 있는 방법입니다. 그러한 데이터로는 현재 로그인한 유저, 테마, 선호하는 언어등이 있습니다. 예로 아래의 코드는 버튼 컴포넌트를 꾸미기 위해 테마 props를 명시적으로 넘겨주고 있습..