useContext, ContextAPI 의미

쏘뽀끼·2024년 7월 25일

react

목록 보기

3/25

react로 만든 앱은 여러 개의 컴포넌트로 이루어져 있다.
최상위 앱 컴포넌트에서 시작해서 트리형태로 쭉쭉 뻗어나간다고 보면 된다!

리액트에서 일반적인 데이터 흐름

위 ➡️ 아래

부모 ➡️ 자식

이러한 방향으로 props를 통해 전달이 된다.

Props를 통한 전달

import useState from "react";
import Header from "./Header";


const App() =>{
const[user,setUser] = useState('');
return <Header user={user}/>
}

export default App;

App(부모)컴포넌트 안에서 Header(자식)컴포넌트를 담고 있다.

그럼 Header 컴포넌트에서

import SearchBar from "./SearchBar";

const Header = ({ user }) => {
  return (
    <div>
      <SearchBar user={user} />
    </div>
  );
};

export default Header;

이런식으로 user를 받아오고 또 SearchBar(Header의 자식, APP의 손자)에게 user라는 prop을 내려주게 되는 형식이다.

만약 자식의 자식 또 그 자식의 자식이 다 user라는 prop을 필요로 한다면 계속해서 저러한 과정을 지속해야 한다.

최악의 경우

최상위 부모(APP)에서 prop을 가지고 있는데
자식은 그 prop을 사용하지 않는다.
그러나 자식의 자식 그 자식의 자식과 같이 완전 하위 컴포넌트에서는 해당 prop을 필요로 하는 상황이라고 하자.

그럼 그 중간에 있는 자식 컴포넌트들은 해당 prop을 사용하지 않는데도, 계속해서 넘겨줘야 한다.
어떻게 보면 필요하지 않는 코드가 추가되는 느낌이다.

또한 전달 과정에서 실수로 이상한 데이터를 전달하거나 데이터를 수정해버리면, 부모컴포넌트를 찾아다니면서 에러를 해결해야 한다.

이렇게 깊숙히 prop을 전달해주는 걸 prop drilling이라고 한다.

Context

react는 이러한 문제점을 해결하기 위해 context api라는 것을 제공해준다.

context는 앱 안에서 전역적으로 사용되는 데이터들을 여러 컴포넌트들끼리 쉽게 공유할 수 있는 방법

아까 처럼 prop을 일일이 전달 해주지 않아도 해당 데이터를 갖고 있는 상위 컴포넌트가 하위 컴포넌트들에게 사용하게끔 할 수 있다.

하위 컴포넌트들은 어디에 있든 필요하면 해당 prop을 사용할 수 있는 것!!!!

즉 전역적인 데이터를 전달하기에 굉장히 편리하다.

props대신 context를 사용해서 데이터를 공유하면 한 곳에 있는 데이터를 각각 자녀 컴포넌트들이 useContext를 활용해서 가져다 쓸 수 있다.

useContext : context로 공유한 데이터를 쉽게 받아올 수 있게 도와주는 역할

context가 있으니 prop은 필요없는 거 아닌가?

context는 꼭 필요할 때만!

context를 사용하면 컴포넌트를 재사용하기 어려워 질 수 있다.
Context의 주된 목적은 다양한 레벨에 있는 많은 컴포넌트들에게 전역적인 데이터를 전달하기 위함!
react 공식문서에는 Context를 단지 Prop drilling을 피하기 위한 목적이라면 'Component Composition(컴포넌트 합성)을 먼저 고려해보라고 권장한다.