react의 context 알아보기

리액트에서 데이터를 전달하는 방법

리액트에서 데이터를 전달할 때는 props를 통해서 부모가 자식에게 전달하는 방법이 가장 간단하고 쉽습니다. 가령 부모 컴포넌트의 state에 {name:react, company:facebook}이라는 값이 있다면 자식 컴포넌트에서 props.name과 props.company로 받는 형태입니다.

코드로 보니 좀 더 이해가 가시나요? 일반적으로 데이터를 전달하는 방법은 이렇습니다. 하지만 이럴경우 여러 단계를 거쳐야만 하는 경우가 생깁니다.

컴포넌트 트리를 그려봤습니다.

주황색 부모 컴포넌트에서 맨 밑에 있는 주황색 자식 컴포넌트에 값을 전달하려고 하면 어떻게 해야할까요? 중간에 컴포넌트들을 통해서 계속 값을 전달해야하만 주황색 자식 컴포넌트에 값을 전달할 수 있습니다. 저것보다 더 복잡한 형태라면 그야말로 코드를 작성하는 도중에 미로가 탐험하게 될지도 모릅니다.

중간을 거치지 않고 값을 전달하는게 편할 때도 있습니다.

이미 리덕스에 대해서 아신다면 리액트16에서 변한 모습의 콘텍스트가 반가우실 것이고, 처음 접하시는 개념이라면 중간을 거치지 않고 값을 전달할 수 있는 좋은 방법이라고 생각하시면 됩니다. 이런 복잡한 상황들은 어디에서 일어날까요? "전역적"으로 값을 알아야 하는 것들이 있습니다. 로그인에 대한 유무, 음악을 끌 지 켤 지에 대한 선택 등이 이러한 전역적으로 알아야 할 값들입니다. 자식 컴포넌트에 이것들과 관련된 버튼이 있다고 했을 때 그 값을 계속 전달하기보다는 중간 과정을 거치지 않고 해결하는 것이 더 깔끔하겠죠?

사용방법

createContext를 통해서 만들고, Provider로 연결하고 Consumer를 통해서 사용합니다.

이런 방식들로 선언할 수 있습니다. Context라는 변수명은 바꾸셔도 상관없습니다. 이렇게 선언한 후에 사용할 컴포넌트에 가서 Provider로 연결합니다.

Provider는 value라는 속성을 가집니다. 여기에 우리가 하위 컴포넌트들에게 전달해야 하는 값을 넣어주시면 됩니다. 이렇게 연결하면 이제는 우리가 값을 사용해야할 자식 컴포넌트 쪽으로 가서 Consumer를 통해서 값을 사용할 수 있습니다.

함수를 통해서 받아와야 하고 매개변수는 우리가 전달한 값입니다. 우리가 Provider를 통해서 연결한 컴포넌트의 하위 컴포넌트에서는 어디서든 Consumer를 통해서 값을 받아올 수 있습니다.

콘텍스트 사용 시 주의사항

createContext를 사용할 때 디폴트 값을 설정하는 부분이 있었습니다. 이때 값을 설정해두면 프로바이더와 연결되어 있지 않은 부분에서 컨슈머를 사용할 때 디폴트 값이 사용됩니다. 또한 리덕스와 달리 콘텍스트를 여러개를 만들어서 사용할 수 있습니다.

공감은 제작자에게 큰 힘이 됩니다.