10.10.22{코딩일기}벨로퍼트와 함께하는 모던리액트 1-22챕터리뷰

[ 새롭게 알게 된 것 ]

---

1. Context API는 컴포넌트를 3개이상 거쳐서 props를 전달할때 활용됨

---

컴포넌트를 한개정도 거쳐서 전달하는건 크게 불편한게 아님.

3개이상일땐 Context API와 dispatch를 사용해 복잡한 구조를 해결할 수 있음.

 

---

 

2. Context API로 관리할 수 있는 값은 전역'값'이지 '상태'에 국한되지 않음을 알게됨

---

이 값은 함수일수도 있고, 인스턴스 일 수도 있고, DOM일 수 도 있음

---

 

3.  Context API를 사용하는 방법

---

Context를 만들땐 React.createContext()라는 함수를 사용함.

createContext의 파라미터에는 Context의 기본값을 설정할 수 있음.

여기서 기본값이란 값을 따로 지정하지 않을 경우 사용되는 기본값.

 

예를들면 app.js에서 아래와 같이 작성함.

app컴포넌트 외부에 UserDispatch라는 이름으로 내보내줌.

// UserDispatch 라는 이름으로 내보내줍니다.
export const UserDispatch = React.createContext(null);

app 컴포넌트 안에는 

  return (
    <UserDispatch.Provider value={dispatch}>

이 UserDispatch 라는 Context 를 통해 어디서든지 dispatch 를 꺼내 쓸 수 있도록 준비를 해준 것임.

아래와 같이 다른 파일에서 다시 불러와서 사용 가능함.

import { UserDispatch } from './App';

---

 

4. Context 안엔 Provider라는 컴포넌트를 통해 Context값 설정가능함.

---

value 값에 들어간 dispatch는 setter함수임. 21챕터 참조

<UserDispatch.Provider value={dispatch}>...</UserDispatch.Provider>

 

---