React(26) 리액트 훅 Context API 란

Updated 2021/05/07

Context API를 사용하는 이유 

React 에서 일반적인 값을 전달하는 방법은 하향식(부모→자식)으로 전달해야한다.

 

보통 상위에서 → 하위컴포넌트로 props를 통해 속성값을 전달하는데

상위 → 하위 → 하위 → .... → 하위 처럼 많은 수의 컴포넌트를 거쳐 전달하게 되면 코드를 계속 하위로 toss 해줘야 한다. 이 방식은 Level이 깊어질수록 불편함을 야기한다.

 

이때 Context API를 이용하면 상위 컴포넌트에서 직접 하위 컴포넌트로 데이터를 전달할 수 있다. 중간에 있는 컴포넌트는 콘텍스트 데이터의 존재를 몰라도 되므로 속성값을 반복해서 내려주던 문제가 사라진다. 

 

 

1. 선언하기

createContext 함수를 호출하면 콘텍스트 객체가 생성된다. 괄호 안 ( 매개변수 )는 적절한 Provider를 찾지 못했을 때만 쓰이는 값이다.

const UserContext = React.createContext('');

 

과정

1. Consumer 컴포넌트는 데이터를 찾기위해 상위로 올라가면서 가장 가까운 Provider 컴포넌트를 찾는다.

2. 만약 최상위에 도달할 때까지 Provider가 없다면 기본 값이 사용된다.

3. 그러다가 Provider의 value 값이 변경되면 모든 Consumer 컴포넌트는 렌더링 된다. (최상위 - 최하위 사이에 걸쳐있는 컴포넌트들 몽땅)

Context.Consumer의 내용은 항상 함수여야 한다.

**전체소스코드 (더보기클릭)

const UserContext = React.createContext('');

function App() {

  return (

    <div>

      <UserContext.Provider value="Mike"> 

        <div>상단메뉴</div>

        <Profile/>

        <div>하단메뉴</div>

      </UserContext.Provider>

    </div>

  );

}

 

function Profile() = React.memo(() => {

  return (

    <div>

      <Greeting/>

      {/* ... */}

    </div>

  );

});

 

function Greeting() {

  return (

    <UserContext.Consumer>

      {username => <p>{'${username}님 안녕하세요'}</p>}

    </UserContext.Consumer>

  );

}