[ Context API ] React Context , redux와의 차이점

https://www.freecodecamp.org/news/react-context-for-beginners/

React Context for Beginners – The Complete Guide (2021)

 

리액트 context가 무엇인지, 어떻게 사용하는지, 언제 사용하고 사용해서는 안되는지 알아보자 

 

리액트 context란?

리액트 context 는 앱에서 컴포넌트에 props를 사용하지 않고 필요한 데이터를 넘겨주며 사용할 수 있게해준다.

▶ 리액트 context는 컴포넌트들이 데이터(state)를 더 쉽게 공유할 수 있도록 함

리액트 context를 사용해야 할때

앱의 모든 컴포넌트에서 사용할 수 있는 데이터를 전달할때 유용

- 테마데이터

- 사용자 데이터(현재 인증된 사용자)

- 로케일 데이터 (언어 혹은 지역)

 

데이터는 자주 업데이트할 필요없는 리액트 context에 위치해야한다.

왜??

context는 전체적인 상태관리를 위해 만들어진게 아니라 쉽게 사용하기 위해 만들어짐 

> 리액트 context는 컴포넌트를 위한 전역변수와 같다고 생각하자

 

리액트 context가 해결해주는 문제

props drilling을 막는데 도움을 준다.

props drilling : 중첩된 여러계층의 컴포넌트에게 props를 전달하는것. (사용하지않는곳까지)

 

context 사용방법

context는 버전 16부터 사용가능한 내장 API이다.

> 어떤 리액트 프로젝트라도 import하면 바로 생성 사용가능

 

1. createContext 메서드를 사용해 context를 생성

2. 생성된 context를 가지고 context provider로 컴포넌트 트리 감싼다.

3. value prop을 사용해 context provider에 원하는 값 입력

4. context consumer를 통해 컴포넌트에 그값 불러온다.

 

import React from 'react';

export const UserContext = React.createContext();
//  React.createContext()로 context 만들고 useContext 변수에 결과 담아둠 

export default function App() {
  return (
    <UserContext.Provider value="Reed">
      <User />
    </UserContext.Provider>
  )
}
//App에서 UserContext.Provider 사용하고있음. 
//context는 provider와 consumer라는 프로퍼티 갖는 객체이다.
// 모든 컴포넌트에 값 내려주기 위해서는 감싸줘야한다(ex User 컴포넌트)

function User() {
  return (
    <UserContext.Consumer>
      {value => <h1>{value}</h1>} 
      {/* prints: Reed */}
    </UserContext.Consumer>
  )
}
//context에서 제공하는 값 사용하려면 UseContext.consumer 사용
//전달된 값 사용하려면 render props 패턴 사용 : consumer컴포넌트가 prop처럼 전달

 

 

useContext 훅이란?

위에 예시에서 render props 패턴 사용하는게 조금 이상하다

그래서 훅 사용하는 방법 등장

 

render props 대신 컴포넌트 최상단에서 React.useContext()에 전체 context 객체를 내려줄수 있다

 

import React from 'react';

export const UserContext = React.createContext();

export default function App() {
  return (
    <UserContext.Provider value="Reed">
      <User />
    </UserContext.Provider>
  )
}

function User() {
  const value = React.useContext(UserContext);  
    
  return <h1>{value}</h1>;
}

 

context가 필요없을때

많은 개발자들이 하는 실수는 여러레벨에 컴포넌트에서 props를 내려줘야하는 경우 매번 context를 사용하는것

 

// username과 avatarSrc 두가지 props가 필요한 Avatar라는 중첩컴포넌트가 있다.

export default function App({ user }) {
  const { username, avatarSrc } = user;
  return (
    <main>
      <Navbar username={username} avatarSrc={avatarSrc} />
    </main>
  );
}

function Navbar({ username, avatarSrc }) {
  return (
    <nav>
      <Avatar username={username} avatarSrc={avatarSrc} />
    </nav>
  );
}

function Avatar({ username, avatarSrc }) {
  return <img src={avatarSrc} alt={username} />;
}

 

게속 같은 props를 반복 전달하고있는데, 

어떻게 하면될까....?

 

prop drilling 하고있다는 이유로 바로 context에 의지하지말고 컴포넌트를 잘 구성하자

 

 

최상위 App에만 Avatar 컴포넌트에 대해 알고있으면 되므로 

-> App 내에서 바로 avatar를 만들어라 

 

export default function App({ user }) {
  const { username, avatarSrc } = user;
  const avatar = <img src={avatarSrc} alt={username} />;
  return (
    <main>
      <Navbar avatar={avatar} />
    </main>
  );
}
function Navbar({ avatar }) {
  return <nav>{avatar}</nav>;
}

 

요렇게 하면 props내려주는것 대신 avatar라는 하나의 prop만 내려주면됨

 

리액트 context가 리덕스를 대체하는가

맞기도하고 틀리기도함

 

state를 업데이트 하는 것이 아니라, 컴포넌트에 전달만 해주는 경우라면 

리덕스와 같은 전역상태 라이브러리는 필요하지 않을 수도있다.

 

context 와 redux의 차이점?

context API와 redux는 데이터를 특정계층에 있는 컴포넌트에 직접 전달이 가능하다.

그리고 내부적으로 redux는 contextAPI를 사용하여 컴포넌트 tree를 따라 스토어에 있는 데이터들을 전달한다.

 

1. Context API는 특정 context에 의존하는 컴포넌트들을 분리시킬 수 있다.

여러개이 context를 만들고 해당 context와 관련있는 컴포넌트들만 묶어서 분리 가능함

이렇게하면 관련없는 컴포넌트는 애초에 데이터 접근이 불가능해져서 side effect 사전방지

2. 데이터를 처리하는 방식

Redux는 전체 애플리케이션의 데이터를 redux store라고 불리는 하나의 거대한 객체로 관리.

그리고 사전에 정의된 action과 reducer를 통해서만 상태변경할 수있음

 

Context는 하나로 구성 x, 데이터 별도 관리 x

context는 state를 들고있는 것이 아니라, state를 전달하기 위한 통로의 역할 만 함.

 

( 만약 Context API를 사용해서 state를 업데이트 하려면, 상위 컴포넌트의 state에 의존할 수밖에 없다.
상위 컴포넌트에서 state를 업데이트하고, 변경된 값을 Context라는 통로를 통해 하위 컴포넌트로 전달만 하는 것)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

https://www.frontoverflow.com/document/1/%EC%B2%98%EC%9D%8C%20%EB%A7%8C%EB%82%9C%20%EB%A6%AC%EB%8D%95%EC%8A%A4%20(Redux)/chapter/3/Redux%20%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/section/13/Redux%20vs%20Context%20API