Context API 사용

BBAKJUN·2022년 3월 23일
0

React

목록 보기
4/7
post-thumbnail

React로 개발하다보면 모든 컴포넌트에 어떤 state를 Props로 넘기고 싶은 상황이 분명 발생하게 된다.

근데 전역상태관리 없이 그냥 무지성으로

부모에서 자식 컴포넌트에게 전달 방식으로한다면...?
벌써 아찔하다.

Context API 무엇일까

그렇다 전역상태 api다.
기본적으로 React 에서 제공해주고있으며 공식문서를 확인해보자.

나도 모르게 사용을 했었더라??
쇼핑몰 개발 강의를 보며 따라했었는데 지금와서야 사용했었다는걸 알게 되었고, 복기하기위해 작성한다.

Context 에서 제공하는 api

createContext


Context 객체를 만들어준다. Context 객체를 구독하고 있는 컴포넌트를 렌더링할때 트리 상위에서 가장 가까이 있는 짝이 맞는 Provider로부터 현재 값을 읽는다

Provider

Context 오브젝트에 포함된 React 컴포넌트인 Provider는 context를 구독하고 있는 컴포넌트에게 변화를 알리는 역할을 한다.

provider는 프로퍼티인 value props를 받아 하위 컴포넌트에게 전달한다.

contextType

createContext로 만든 Context 객체를 원하는 클래스의 contextType 으로 지정해줄수있다.

this.context 를 사용해 해당 Context의 가장 가까운 Provider를 찾아 그 값을 읽는다.

Consumer

context 변화를 구독하는 React 컴포넌트.

Consumer의 자식은 함수여야함. 안그러면 에러 뱉어내고
context의 상태에 따른 렌더링을 시켜주면 된다.

예시에서는 언어에따라 document 의 title을 변경시켜주었다.

displayName

안 써봣으니 공식문서에서 먼저 확인하자

사용후 어떻게 사용하는지 다시 정리하기로

사용예제

목적

select Box에서 국가를 선택하면 document의 title이 변경되도록 구현해보자

구조

Context
├── node_modules
├── jsconfig.json
├── next.config.js
├── package.json
├── public
│   └── favicon.ico
├── src
│   ├── component
│   │   ├── Layout.js
│   │   └── Seo.js
│   ├── modules
│   │   ├── index.js
│   │   └── lang.js
│   ├── pages
│   │   ├── _app.js
│   │   └── index.js
│   └── utils
│       └── data.js
└── yarn.lock

_app.js

음 뭐라부르지 최상단부모?에 LangProvider를 넣어주었다.
그래야 자식 컴포넌트들에게 context를 뿌려줄수있으니까

_app.js 는 페이지를 불러오기 전 초기화 해주는 Component라고 공식문서에 나온다.
이 이유로 전체 페이지에서 공통적으로 사용되는 Context 이기 때문에 페이지를 불러오고 초기화해주는 과정에서 해당 페이지 컴포넌트에 전역으로 context를 뿌려줄수있다.

modules/lang.js

셀렉트 박스에 value change 이벤트에 할당될 메서드 function과 lang state를 잡아주었다.

여기서 Context API 가 제공해주는 api를 거의 ? 다 사용한듯하다.

createContext / Provider / Consumer 의 개념을 모두 사용하였다.

pages/index.js - 랜딩페이지

사실 셀렉트 박스 부분은 빼내지 않아도 되는데
그냥 빼봤다...

static contextType = LangContext
LanguageSelect 컴포넌트의 context를 지정해주었고

셀렉트 박스에 onChange 이벤트LangContextsetLang메서드로 지정해주었다.

component/Layout.js

여기서도 contextLangContext 로 지정해주어서 SEO 컴포넌트로 넘겨주었다.

그런데 이글을 작성해보니 SEO 컴포넌트에서 바로 받아와도 되는데 괜히 이렇게 한거같다 수정할게요 ㅋㅋ

component/SEO.js

next-seo 라이브러리를 사용하여 만들어준 컴포넌트다.
openGraph 설정등..? 편한것이 많아보이지만 사용은 이번이 첨이다.

next-seo_GITHUB 궁금할때마다 찾아보자

완성

profile
함께 일하고 싶은 환경을 만들어가는 프론트엔드 개발자 박준형입니다.

0개의 댓글