React - Context API(전역 값 관리)

이전 코드들에서 UserList는 다리 역할만 하고 있음

User 컴포넌트로 onRemove와 onToggle을 전달하기 위해서

UserList컴포넌트에선 쓰지 않지만 내부에 적어줬음

- UserList.js -

function UserList( { users, onRemove, onToggle }){ // 여기도


  return (
    <div>
      {
        users.map(
          (user) => (
            <User
              user={user}
              key={user.id}
              onRemove={onRemove} // 여기랑
              onToggle={onToggle} // 여기
            />
          )
        )
      }
    </div>
  )
}

 

Context API 사용하면, 이렇게 넘겨 받지 않아도 바로 User컴포넌트까지 전달할 수 있다.

 

본 예제 적용하기 전에

간단한 예제로 테스트

1. ContextSample.js 생성

- createContext와 useContext 선언

import React, { createContext, useContext } from 'react';

function Child({ text }) {
  return <div>안녕하세요? {text}</div>
}

function Parent({ text }) {
  return <Child text={text} />
}

function GrandParent({ text }) {
  return <Parent text={text} />
}

function ContextSample({ text }) {
  return <GrandParent text='Good' />
}

export default ContextSample;

 

2. index.js에서 컴포넌트 실행확인

...

import * as serviceWorker from './serviceWorker';
import ContextSample from './ContextSample';

ReactDOM.render(
  <React.StrictMode>
    <ContextSample />
  </React.StrictMode>,

...

3. Context API 사용

- ContextSample.js -

Child 함수 내부 수정, MyContext 변수 선언

import React, { createContext, useContext } from 'react';

const MyContext = createContext('defaultValue');

function Child() {
  const text = useContext(MyContext);
  return <div>안녕하세요? {text}</div>
}

- text의 값이 정해지지 않았기 때문에 defaultValue라고 뜬다.

 

4. 값 설정하기

가장 상위에 있는 컴포넌트로 가서

MyContext 안에 Provider라는 컴포넌트 있음 -> 이거 사용해서 감싸주고 -> value값 넣어주면 됨

function ContextSample() {
  return (
    <MyContext.Provider value="Good">
      <GrandParent text='Good' />
    </MyContext.Provider>
  )
}

text 변수에 대한건 모두 지워도 된다.

 

5. value값 유동적으로 변환시키기

1) useState선언

import React, { createContext, useContext, useState } from 'react';

2) useState 적용

function ContextSample() {
  const [value, setValue] = useState(true);
  return (
    <MyContext.Provider value={value ? "Good" : "bad"}>
      <GrandParent />
      <button onClick={() => setValue(!value)}>
        CLICK ME
      </button>
    </MyContext.Provider>
  )
}

클릭 할 때마다 Good또는 Bad로 바뀜

 

 

마지막 코드

import React, { createContext, useContext, useState } from 'react';

const MyContext = createContext('defaultValue');

function Child() {
  const text = useContext(MyContext);
  return <div>안녕하세요? {text}</div>
}

function Parent() {
  return <Child/>
}

function GrandParent() {
  return <Parent/>
}

function ContextSample() {
  const [value, setValue] = useState(true);
  return (
    <MyContext.Provider value={value ? "Good" : "bad"}>
      <GrandParent />
      <button onClick={() => setValue(!value)}>
        CLICK ME
      </button>
    </MyContext.Provider>
  )
}

export default ContextSample;

 

 

React - Userdispatch Context