[TIL] 프론트엔드 22.05.30

KIKO·2022년 6월 1일
0

TIL

목록 보기
22/23
post-thumbnail

📚 공부한 내용

Context API

Props를 이용한 데이터 전달은 Vue에서와 동일한 문제점을 공유한다. 컴포넌트 사이의 거리가 멀어지면 중간에 위치한 컴포넌트는 사용하지 않는 데이터임에도 불구하고 하위 또는 상위 컴포넌트에게 전달하기 위해서 props를 사용한다. 강의에서는 위와 같은 상황을 props drilling이라고 설명했다. Vue에서는 이를 위해서 ProvideInject를 사용한 것처럼. React에서는 Context APIContext ProviderContext Consumer를 사용할 수 있다.

1. Context 생성

creatContext()를 사용해서 Context 객체를 만들 수 있다. creatContext()의 입력으로 기본값을 설정할 수 있다.

const MyContext = React.creatContext(defaultValue)

2. Provider - 데이터의 전달

객체에 포함된 컴포넌트 Provider를 이용해 데이터를 전달하며, 이 데이터는 value prop으로 지정한다. 데이터는 Provider의 하위 컴포넌트에 전달이 가능하며, 여러 Context의 Provider를 중첩해서 사용할 수 있다.

<MyContext.Provider value={data}>
  <!-- 데이터를 전달이 필요한 하위 컴포넌트 -->
</MyContext.Provider>

3. Consumer - 데이터의 사용 1

Context 객체에 포함된 컴포넌트 Consumer를 사용해 Provider를 통해서 전달한 데이터를 사용할 수 있다. Cousumer의 자식은 반드시 함수여야 한다. 만약 Consumer 컴포넌트의 상위 컴포넌트에 Provider가 존재하지 않는다면 createContext()에 입력한 기본값이 데이터로 주어진다.

<MyContext.Provider value={data}>
  <MyContext.Consumer>
    {value => <div>{value}</div>}
    <!-- <div>data</div> -->
  </MyContext.Consumer>
</MyContext.Provider>
<MyContext.Consumer>
  {value => <div>{value}</div>}
  <!-- <div>defaultValue</div> -->
</MyContext.Consumer>

4. useContext - 데이터의 사용 2

useContext에 Context 객체를 입력해서 Providervalue값을 반환받을 수 있으며, useContext를 호출하는 모든 컴포넌트는 Providervalue props가 변경될 때 리렌더링 된다.

5. 사용 예시

예시에서는 ProviderConsumer 컴포넌트를 사용했다. 부모-자식 관계가 아닌 두 노드가 있고 위에 있는 노드의 input에 값을 입력하면 아래에 있는 노드의 문구가 바뀌는 것을 볼 수있다.


Reference

  1. 프로그래머스 프론트엔드 데브코스
  2. React 공식 문서
    https://ko.reactjs.org/docs/getting-started.html
profile
개발자로 발돋움

0개의 댓글