[스터디 with 실전 리액트 프로그래밍] 12편 - Context API

실전 리액트 프로그래밍

 

Context API

 

리액트로 개발하다 보면 여러 개의 컴포넌트를 중첩시키는 일은 정말 흔하다.

그리고 데이터를 멀리 있는 하위 컴포넌트에게 props로 전달해야 하는 경우도 있다.

이 경우에는 중간 컴포넌트에서 해당 props를 사용하지 않더라도 반복해서 전달해줘야만 한다.

이 때 Context API를 사용하면 이런 번거러운 작업이 필요없다.

Context API는 상위 컴포넌트에서 하위에 있는 모든 컴포넌트로 직접 데이터를 전달할 수 있기 때문이다.

 

 

Context API를 사용하지 않은 것과 사용한 것을 비교해보자.

먼저 사용하지 않은 것이다.

 

import { useState } from "react";

export default function FirstComponent() {
  const [msg, setMsg] = useState("Hello");
  return <SecondComponent msg={msg} />;
}

function SecondComponent({ msg }) {
  return <ThirdComponent msg={msg} />;
}

function ThirdComponent({ msg }) {
  return <h1>{msg}</h1>;
}

 

 

 

중간에 있는 SecondComponent는 props를 사용하지 않지만, ThirdComponent로 전달하기 위해서 props를 전달받아야 한다.

 

 

다음은 Context API를 사용한 것이다.

 

// 생성된 context
import React from "react";

export const MsgContext = React.createContext("");


// 컴포넌트
import React, { useState } from "react";
import { MsgContext } from "./MsgContext";

export default function FirstComponent() {
  const [msg, setMsg] = useState("Hello");
  return (
    <MsgContext.Provider value={msg}>
      <SecondComponent msg={msg} />;
    </MsgContext.Provider>
  );
}

function SecondComponent() {
  return <ThirdComponent />;
}

function ThirdComponent() {
  return <MsgContext.Consumer>
    {(msg) => <h1>{msg}</h1>}
  </MsgContext.Consumer>;
}

createContext 함수는 context 객체를 생성한다.

context 객체는 Provider 컴포넌트와 Consumer 컴포넌트를 갖고 있다.

 

상위 컴포넌트에서 Provider 컴포넌트를 이용해 데이터를 전달한다.

이 떄, 데이터를 사용하는 하위 컴포넌트는 Provider안에 있어야 한다.

데이터사용은 Consumer 컴포넌트에서 이뤄진다.

 

Consumer 컴포넌트는 데이터를 사용하기 위해 상위 컴포넌트를 거슬러 올라가며 Provider 컴포넌트를 찾는다.

Consumer 컴포넌트가 Provider 컴포넌트 밖에 있어서 만약 Provider 컴포넌트를 찾지 못한다면, createContext 호출할 때 인수로 넣은 기본값을 데이터로 사용한다.

 

Provider 컴포넌트의 속성값이 변경되면 하위의 모든 Consumer 컴포넌트가 다시 렌더링된다.

중간 컴포넌트가 렌더링되지 않아도 말이다.

 

여러개의 context를 중첩해서 사용할 수도 있다.

 

만약 Consumer 컴포넌트에서 context 데이터를 수정하고 싶다면, setState 함수를 value로 넣어주면 된다.

 

 

 

 

코드

 

https://github.com/junhee-won/react-study