[React] Context API (4) - Hook, static contextType

Context에 있는 값을 사용할 때 Consumer대신 다른 방식을 사용할 수도 있습니다.

useContext Hook 사용하기

리액트 내장 Hooks 중에서 useContext라는 Hook을 사용하면, 함수형 컴포넌트에서 Context를 아주 편하게 사용할 수 있습니다.
ColorBox 컴포넌트의 코드를 아래처럼 수정합니다.

이전보다 훨씬 간결해졌죠? 만약 children에 함수를 전달하는 Render Props 패턴이 불편하다면, useContext Hook을 사용하여 훨씬 편하게 Context 값을 조회할 수 있습니다. 그리고 Hook은 함수형 컴포넌트에서만 사용할 수 있습니다.

static contextType 사용하기

클래스형 컴포넌트에서 Context를 쉽게 사용하고 싶다면 static contextType을 사용하는 방법도 있습니다.
SelectColors 컴포넌트를 다음과 같이 클래스형으로 변환해 보세요. 그리고 Consumor쪽 코드는 제거하셔도됩니다.

위처럼 해주면 this.context를 조회하면 현재 Context의 value를 가리키게 됩니다. 만약 setColor를 호출하려면 this.context.actions.setColor를 호출하면 됩니다.

render위의 각 박스의 색을 바꾸는 함수를 추가합니다.

그리고 render 부분을 아래와 같이 바꿔주면 이전과 마찬가지로 박스의 색이 바뀌게 됩니다.

static contextType을 정의하면 메서드에서도 Context에 넣어 둔 함수를 호출할 수 있다는 장점이 있고, 단점이라면, 한 클래스에서 하나의 Context 밖에 사용하지 못한다는 단점이 있습니다. 새로운 컴포넌트 작성시 클래스형으로 작성하는 경우는 많이 없기 때문에 보통은 useContext를 사용하는 쪽을 권장합니다.

기존에는 컴포넌트 간에 상태를 교류해야 하는 경우 무조건 부모 >> 자식 흐름으로 props를 통해 전달해주었지만 이제는 Context API를 통해 더욱 쉽게 상태를 교류할 수 있게 되었습니다.

프로젝트의 컴포넌트 구조가 꽤 간단하고 다루는 상태의 종류가 그다지 많지 않다면 굳이 Context를 사용할 필요가 없으나 전역적으로 많이 사용되고 컴포넌트의 개수가 많다면 Context API를 사용하는 것을 권장합니다.