이 글은 리액트 공식 문서에서 공부하면서 제가 이해한 대로 글을 적은겁니다.
리액트 공식 홈페이지

React는 props라는 걸로 부모가 자식 컴퍼넌트에 전달을 하는 과정을 가지지만
이게 한두개 컴퍼넌트가 적을때는 괜찮다 쳐도,
여러 컴퍼넌트를 거치면 과정이 복장하고 번거러울수가 있다. 그렇기에 우린 이 context라는 것을 사용해 단계마다 명시적으로 props를 넘기지 않아도 다같이 공유를 할 수 있도록 할수 있다.

언제 사용하면 좋을까

리액트 트리안에서 전역적이라 볼수 있는 데이터를 쉽게 공유할수 있게 고안이 된 방법이라고 한다.

이 코드는 버튼 컴포넌트를 꾸미기 위해 테마 props를 명시적으로 넘겨주는 함수이다.

class App extends React.Component {
  render() {
    return <Toolbar theme="dark" />;
  }
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton theme={props.theme} />
    </div>
  );
}

class ThemedButton extends React.Component {
  render() {
    return <Button theme={this.props.theme} />;
  }
}

툴바라는 컴포넌트는 prop를 받아서 ThemeButton에 전달을 해야합니다.
하지만 이 과정에서 앱안의 모든 버튼이 테마의 정보를 넘기는 그 과정은 굉장히 번거러운 과정이 됩니다. 그렇기에 context를 사용하여 그 props를 넘기지 않아도 됩니다.

const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
 
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}


function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
 다.

  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

이러한 방식으로 Context를 사용하면 됩니다.

VS Code에서 사용을 해봤는데 react app을 생성하고 src 폴더안에
store라는 폴더를 한개 만들어서 사용을 했습니다.