4.1 useContext란?

4.1.1. 컨텍스트 정의

컴포넌트 간의 데이터(state)를 전달하려면 props를 이용하여 전달해야만 했습니다. props를 통한 전달 방법은, 부모요소에서 자식요소로만 진행되며 부모-자식 컴포넌트의 깊이가 깊어질수록 데이터를 사용하지 않는 컴포넌트라도 자식 컴포넌트가 사용한다면 props를 넘겨줘야 하는 번거로움이 있었습니다.

그림 4-1

그림 4-1

비교적 작은 규모의 프로젝트의 경우 데이터를 넘겨줄 때엔 간단한 작업으로 효율적으로 작업할 수 있습니다. 하지만 규모가 있는 프로젝트일수록 컴포넌트의 깊이가 깊어지고 데이터의 전달이 많아집니다. props가 필요한 자식 컴포넌트가 아니더라도, 그 아래 자식 컴포넌트에게 전달하기 위해 props를 전달해야 하는 불필요하고 반복적인 작업이 이루어지게 됩니다.

그림 4-2

그림 4-2

이러한 현상을 props가 드릴로 뚫고 들어간다고 표현하여 props drilling이라고 불립니다. 컨텍스트는 리액트 컴포넌트 트리 안에서 전역적이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법이기 때문에 props drilling 현상을 막을 수 있습니다.

그림 4-3

그림 4-3

전역적으로 데이터를 관리하고 사용할 수 있는 방법이 있으니, props를 넘겨주는 방식을 사용하지 않고 컨텍스트만 쓰면 되겠다! 라고 생각할 수 있습니다. 하지만 규모가 작은 프로젝트라면 props를 사용하는 것이 훨씬 효율적일 수 있으니 효율성을 생각하여 사용하는게 좋습니다.

4.1.2. Context 종류