처음 만난 리액트 - 15. Context

Context란?

기존의 리액트 컴포넌트들 사이에서 데이터를 props를 통해 전달하는 방식을 사용하면 여러 컴포넌트에 걸쳐 굉장히 자주 사용되는 데이터의 경우 코드도 너무 복잡해지고 사용하기에 불편함이 많았다.

따라서 데이터를 props 통해 전달하는 방법 대신 컴포넌트 트리를 통해 데이터를 곧바로 컴포넌트로 전달하는 새로운 방식을 말한다.

컨텍스트를 사용하면 일일이 props로 전달할 필요 없이 위 그림처럼 데이터를 필요로 하는 컴포넌트에 곧바로 데이터를 전달할 수 있다.

따라서 코드도 매우 깔끔해지고 데이터를 한 곳에서 관리하기 때문에 디버깅을 하기에도 굉장히 유리하다.

 

그렇다면 언제 컨텍스트를 사용하는 것이 좋을까?

여러 컴포넌트에서 자주 필요로 하고 접근해야 하는 데이터로는 사용자의 로그인 여부, 로그인 정보, UI 테마, 현재 선택된 언어 등이 있다.

 

기존 방식 : props를 통해 데이터 전달

 

context 사용하여 데이터 전달

같은 기능을 하는 코드를 두 가지 방식으로 작성한 코드이다.

context를 사용하는 코드의 경우 React.createContext 함수를 사용해서 Themecontext라는 이름의 컨텍스트를 하나 생성하고,

컨텍스트를 사용할 컴포넌트의 상위 컴포넌트에서 Provider로 감싸주어야 하는데 여기에서는 최상위 컴포넌트인 app 컴포넌트를Themecontext.Provider로 감싸주었다.

이렇게 하면 프로바이더의 모든 하위 컴포넌트가 얼마나 깊이 위치해 있는지 관계없이 컨텍스트의 데이터를 읽을 수 있다.

 

이처럼 여러 컴포넌트에서 계속해서 접근이 일어날 수 있는 데이터들이 있는 경우에는 컨텍스트를 사용하는 것이 좋다.

 

Context는 다른 레벨의 많은 컴포넌트가 특정 데이터를 필요로 하는 경우에 주로 사용하지만 컴포넌트와 Context가 연동되면 재사용성이 떨어지기 때문에 무조건 Context를 사용하는 것이 좋은 것은 아니다.

따라서 다른 레벨의 많은 컴포넌트가 데이터를 필요로 하는 경우가 아니라면 기존에 사용하던 방식대로 props를 통해 데이터를 전달하는 컴포넌트 컴포지션 방법이 더 적합하다.

 

Context 대체 방법

위와 같이 몇단계에 걸쳐서 사용자 정보와 아바타 사이즈를 하위 컴포넌트에 보내야 하는 경우 props를 통해 보내면 번거롭다.

여기서 컨텍스트를 사용하지 않고 아바타 컴포넌트를 변수에 저장하여 직접 넘겨주는 방법을 사용할 수 있다. (9강의 ElementVariable 형태 참고)

그렇게 하면 중간 단계에 있는 컴포넌트들은 유저와 아바타 사이즈에 대해 전혀 몰라도 된다.

 

이 코드에서는 유저와 아바타 사이즈가 props로 들어간 아바타 컴포넌트를 userlink라는 변수에 저장한 뒤에 해당 변수를 하위 컴포넌트로 넘기고 있다. 이렇게 하면 가장 상위 레벨에 있는 페이지 컴포넌트만 아바타 컴포넌트에서 필요로 하는 유저와 아바타 사이즈에 대해 알고 있으면 된다.

이런 방식은 중간 레벨의 컴포넌트를 통해 전달해야 하는 props를 없애고 코드를 더욱 간결하게 만들어주며, 최상위에 있는 컴포넌트에 좀 더 많은 권한을 부여해줄 수 있다는 장점이 있다.

하지만 데이터가 많아질수록 상위 컴포넌트는 점점 더 복잡해지고 하위 컴포넌트는 너무 유연해진다는 단점이 있으므로 

앞에서 사용한 방법을 좀 더 응용해서 하위 컴포넌트를 여러 개의 변수로 나눠서 전달하는 방법도 알아두자.

이 방식은 하위 컴포넌트의 의존성을 상위 컴포넌트와 분리할 필요가 있는 대부분의 경우에 적합한 방법이다.

 

다만 어떤 경우에는 하나의 데이터에 다양한 레벨에 있는 중첩된 컴포넌트들이 접근할 필요가 있을 수 있으며 이러한 경우에는 이 방식은 사용할 수 없고 컨텍스트를 사용해야 한다.

따라서 각 경우에 적절한 방식을 사용하도록 하자.