# 129 [udemy React 완벽 가이드 노트] 리액트 Context 필요성

문제점 

---

 

프롭을 통해 많은 컴포넌트를 거쳐 많은 데이터를 전달할 때 

 

문제 예시

 

 

 

App.js 파일의 App 컴포넌트 안에서의 state

 

const [isLoggedIn, setIsLoggedIn] = useState(false);

 

이 state는 모든 컴포넌트에서 쓰이게 된다.

 

 

 

  return (
    <React.Fragment>
      <MainHeader isAuthenticated={isLoggedIn} onLogout={logoutHandler} />
      <main>
        {!isLoggedIn && <Login onLogin={loginHandler} />}
        {isLoggedIn && <Home onLogout={logoutHandler} />}
      </main>
    </React.Fragment>
  );

 

isLoggedIn state는 여러 컴포넌트에서 쓰이게 된다. 

login과 logoutHandler 함수도 마찬가지다. 

 

이 데이터들은 props를 통해 전달된다. 

그런데 문제는 너무 많은 컴포넌트를 거쳐 실제적으로 

데이터가 필요한 컴포넌트에 도달해야 한다는 것이다. 

 

그렇게 되면 데이터가 필요하지 않는 컴포넌트도 거쳐야 한다. 

그 컴포넌트에서는 그냥 데이터를 전달할 뿐인 것이다. 

 

MainHeader.js파일

 

import React from 'react';

import Navigation from './Navigation';
import classes from './MainHeader.module.css';

const MainHeader = (props) => {
  return (
    <header className={classes['main-header']}>
      <h1>A Typical Page</h1>
      <Navigation isLoggedIn={props.isAuthenticated} onLogout={props.onLogout} />
    </header>
  );
};

export default MainHeader;

 

데이터가 많아지면 데이터만 전달하는 컴포넌트는 

경로가 점점 길어지게 된다. 

 

프롭체인 문제

---

 

 

해결방법 : Context

---

부모는 데이터가 필요하지 않고 관리할 필요도 없는데도 

데이터를 관리하고 보내준다. 

 

그래서 리액트의 내부적인 state저장소 reactContext가 있다. 

 

실제로 데이터가 필요해 부모로부터 받는 컴포넌트는 

직접 그 저장소에서 받으면 된다. 

프롭 체인을 만들지 않아도 되는 것이다.