[React] React useContext, useReducer에대해 알아보자

이번 포스팅에선 React의 주요 hook인 useContext와 useReducer에 대해 알아보도록 하자.

useContext hook

prop drilling

useContext hook 에 대해 알아보기 전 prop drilling 이 뭔지 알아보자. prop drilling이란 상위 컴포넌트에서 사용하는 state를 하위 컴포넌트에서 사용하기 위해 prop이 계속 타고 타고 내려가는 것을 말한다. 아래 그림은 그 예시를 잘 보여준다.

위 그림을 보면 App component에서 사용하는 state를 하위 컴포넌트에서 쓰기 위해 계속 prop을 타고 타고 내려가는 것을 볼 수 있다. 이렇게 되면 문제점은 크게 두 가지가 있다.

1. 컴포넌트의 재사용성을 떨어트린다.
2. prop을 전달하기 위한 부가적인 코드가 증가한다.

prop을 전달하기 위한 코드가 생기면, 그 컴포넌트는 이제 해당 prop이 필요없는 상위 컴포넌트에서 재사용하기 힘들어지고 부가적인 코드의 양이 증가해 결국 코드의 가독성이 떨어진다는 단점이 있다. 이를 해결하기 위한 hook이 useContext이다.

useContext 개념

useContext는 data를 컴포넌트끼리 공유하기 위한 방법 중 하나이다.

위의 그림처럼 하나의 state를 만들어두면, 다른 컴포넌트에서 접근 및 수정이 가능하다. 아래의 테마를 바꾸는 예시 코드를 보면서 더 이해해보자.

useContext로 다크모드 만들기

이 코드를 통해 테마를 바꿀 수 있는 함수와 테마의 state를 저장하는 파일을 생성한다.

위 코드의 9번, 14번줄을 보면 ThemeContext에서 불러온 컴포넌트로 하위 컴포넌트들을 감싸는 것을 볼 수 있다. 이렇게 하면 하위 컴포넌트에서 useContext hook을 사용하면 해당 데이터에 접근이 가능하다.

위 코드의 7번줄에서 theme state와 theme state를 변경할 수 있는 함수를 불러온다. 12번 줄의 버튼을 누를때마다 ‘light’와 ‘dark’가 바꿔가며 theme에 저장될 것이고, 그에따른 스타일링을 하면 다크모드와 라이트모드를 구현할 수 있다.

useReducer hook

useReducer 개념

useReducer hook은 React에서 상태 관리를 위해 제공되는 훅 중 하나로, 복잡한 상태 로직을 다룰때 유용하다. 우리가 잘 알고있는 useState와 비슷한 역할을 하는 hook으로, 상대적으로 간단한 state를 다루는데 적당한 hook을 useState이고, 상대적으로 복잡한 state나 이를 관리하기 위한 로직이 복잡할 때, useReducer을 사용하면 좋다. useReducer을 사용하는 또 다른 이유로는 상태 업데이트 로직을 컴포넌트 밖에 함수로 분리할 수 있어 컴포넌트가 간결해지는 장점이 있다.

useReducer 예시 코드

위 코드는 Counter를 만드는 코드이다. 위의 경우는 useState를 사용해도 큰 무리가 없다. 하지만 상태를 다루는 로직이 복잡해지면 복잡해할수록 컴포넌트를 간결하게 만들기 위해, 더 구조적인 로직을 만들기 위해 useReducer을 사용하는 것을 권장한다.

마치며

React를 배우면 배울수록 알게되는 hook이 많은데, 이를 적재적소에 잘 쓰는것이 React를 잘 하는것이 아닌가 싶다. 모든 hook을 사용할 줄 아는 React 개발자보다 상황에 맞는 hook을 사용할 줄 아는 React 개발자가 되어야겠다고 생각한다. 시간이 되면 React hook을 까먹어도 그때그때 참고할 수 있는 React hook 총 정리 포스팅을 작성해야겠다.