React 내부 구현 상태관리

• React 내부에서 상태를 관리하는 방법
• Context API란?
• Context API 사용법

 

로컬 상태 (Local State)

React 내부에서 상태를 관리하는 방법

 

특정 컴포넌트 내에서 데이터를 관리,

다른 컴포넌트와 공유되지 않는다.

 

ex)

useState

Context API

 

 

Context API?

props 대신 component tree를 통해 곧바로 컴포넌트에 전달하는 방식

 

props drilling을 회피하기 위한 용도로 사용한다.

다른 레벨의 많은 컴포넌트가 특정 데이터를 필요로 할 때 주로 사용한다.

 

Context API를 useState 및 useReducer를 함께 사용하는 편이다.

컴포넌트가 상태 관리를 공유할 수 있도록 트래킹을 도와주고, 실제 상태 변경은 useState 및 useReducer 등의 hook 이 진행한다.

 

Context API 사용법

 

먼저 Context를 생성해 주어야 한다.

createContext 함수를 사용한다.

const Mycontext = createContext(초기값);

 

 

Provider

Provider를 사용하여 생성한 context를 하위 컴포넌트들이 데이터를 받을 수 있도록 해준다.

<MyContext.Provier value={데이터값} />

 

Provider로 하위 컴포넌트들을 감싸주면

모든 하위 컴포넌트들이 Context에 접근 가능하다.

 

Consumer

value를 Provider의 하위 컴포넌트들에게 전달하면 하위 컴포넌트들은 이 값을 사용하는데,

데이터를 소비(구독) 한다는 의미를 가져 Consumer 컴포넌트다.

<MyContext.Counsumer>
    {value => <p>내 이름: {name}</p>}
</MyContext.Counsumer>

 

 

Consumer 컴포넌트 예시

const Mycontext = createContext(초기값);

function App() {
  return (
    <MyContext.Provier value={데이터값}>
      <My />
    </MyContext.Provier>
  )
};

function My(props) {
  return (
    <MyContext.Counsumer>
      {value => <p>내 이름: {name}</p>}
    </MyContext.Counsumer>
  )
};

 

 

 

 

++ useContext()

Consumer 컴포넌트보다 더 추천하는 방법이다.

 

useContext() 훅

: createContext() 함수 호출로 생성된 Context 객체를 인자로 받아

현재 Context 값을 리턴한다.

function My(props) {
    const myValue = useContext(MyContext);

    return (
        <div>{myValue}</div>
    )
}

 

** useContext() 훅 사용 시 파라미터로 Context 객체를 넣어줘야 한다 **

 

 

useContext() 훅 예시

const Mycontext = createContext(초기값);

function App() {
  return (
    <MyContext.Provier value={데이터값}>
      <My />
    </MyContext.Provier>
  )
};

function My(props) {
    const myValue = useContext(MyContext);

    return (
        <div>{myValue}</div>  // Provider에서 value로 전달한 데이터 출력
    )
}