12. 리액트 Context

Context란?

리액트에서는 자주 쓰는 데이터를 잘 이용하기 위해 Context를 사용하게 되었다.

코드도 깔끔해지고, 디버깅에도 유리해진다.

여러 개의 컴포넌트에 데이터를 넣고 싶을 때 Context를 사용하면 된다.

로그인 여부 / 로그인 정보 /  UI테마 / 현재 언어 등등.. 자주 쓸 기능을 깔끔하게 사용하기 위함.

---

코드적인 예시는 다음과 같다.

---

물론 Context는 만능이 아니다. 적합한 상황에 써야 좋다.

또한 하위 컴포넌트를 여러 개의 변수로 나누어서 전달도 가능하다.

결국 상황에 따라서 Context를 사용하거나 혹은 props를 이용해서 리액트를 개발해야 하는 것이다.

Context API

생성은 다음과 같이 한다.

---

이후 Provider를 사용해야 한다.

 

이때 Provider 컴포넌트가 재렌더링될 때마다 모든 하위 consumer 컴포넌트가 재렌더링 되는 상황이 벌어질 수 있다. 다음은 관련 코드이다.

빨간 박스 부분이 조금 비효율적인 부분이다. 그래서 이를 고치면 다음과 같은 코드가 나온다.

---

 

state를 사용해서 불필요한 재렌더링을 막는다.

또한, 함수형 컴포넌트에서 여러 개의 Context를 사용하는 방법이 존재한다.

방법은 앞에서 배웠던 "훅"을 이용하는 것이다. 이 훅은 useContext()이다.

예시 코드는 다음과 같다.

파라미터는 Context 객체만 들어와야 한다.(확장자 금지)

(실습) Context를 사용하여 테마 변경 기능 만들기

역시 실습이 최고다. 직접 코드를 구현해야 어떻게 코드를 쓰는지 알 수 있다.

일단 구현되어진 브라우저부터 보여주겠다.

테마 변경이라는 버튼을 누르면 라이트 모드와 다크 모드를 왔다 갔다 할 수 있다.

그리고 코드는 다음과 같다.

가장 기초가 되는 코드다.

Context를 쓰고 싶다면 생성을 해야 한다.

생성은 위 코드처럼 React.createContext() 함수를 상용하면 된다. 이후 ThemeContext의 디스플레이 네임을 ThemeContext으로 정해준다.

---

이후 버튼과 백 그라운드를 스타일한 코드를 작성해 준다. 버튼에 클릭 이벤트가 일어나면 삼항 연산자를 계산해 준다.

---

마지막 코드다.

조건문을 이용해서 라이트 모드 혹은 다크 모드를 변환해 준다. 

포인트는 리턴 부분이다. 아까 Context를 생성한 이후 Provider도 만들어줘야 한다고 말하였다.

태그를 생성하고 Provider를 만들어준다. 값은 앞서서 정의한 theme와 toggleTheme를 받아준다.

이때 앞에서 정의한 Main 컴포넌트를 태그로 둘러줘야 한다. 그래야 제대로 렌더링 된다.

---

코드가 다 작성되었면 index.js에 Dark_Light를 렌더링 해주고 npm start를 해주면 처음에 보여주었던 브라우저 화면이 뜨게 된다.

결론

context은 자주 쓰이는 데이터 처리를 위해 쓰인다.

남용할 필요는 없고, 사용해줘야 할 부분에 잘 써주면 된다.