React, useContext

useContext

 

 

useContext 를 사용하면 기존의 Context 사용 방식보다 더 쉽고 간단하게 Context를 사용이 가능하고, 앞서 다뤘던 useState, useEffect와 조합해서 사용하기 쉽다는 장점이 있다.

 

useContext를 사용할 때 주의해야 할 점은 Provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링 된다는 점이다.

 

따라서 useContext를 사용할 때 value 부분을 메모제이션 하는데 신경을 써야한다.

 

[설치]

npm install react-router-dom / yarn add react-router-dom

npm install axios / yarn add axios

 

Context

 

- context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.

- context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법이다. 그러한 데이터로는 현재 로그인한 유저, 테마, 선호하는 언어 등이 있다.

 

- React 애플리케이션에서 데이터는 props를 통해서 부모에서 자식에게 전달되지만, 애플리케이션 안의

여러 컴포넌트들에게 props를 전달해줘야 하는 경우 context를 이용하면 명시적으로 props를 넘겨주지

않아도 값을 공유할 수 있게 해주는 것이다.

 

=> 데이터가 필요할 때마다 props를 통해 전달할 필요가 없이 context를 이용해 공유한다.

 

context API를 사용하기 위해서는 Provider, Consumer, createContext가 필요하다.

 

① createContext : context 객체를 생성한다.

createContext 함수 호출 시 Provider와 Consumer 컴포넌트 반환한다.

initialValue는 Provider를 사용하지 않았을 때 적용될 초기값을 의미한다.

 

② Provider : 생성한 context를 하위 컴포넌트에게 전달하는 역할을 한다.

 

③ Consumer : context의 변화를 감시하는 컴포넌트이다.

설정한 상태를 불러올 때 사용한다.

 

 

 

---

App.js

 

Context를 사용할 컴포넌트는 상위 컴포넌트에서 Provider로 감싸주어야한다.

Provider의 모든 하위 컴포넌트가 얼마나 깊은 위치에 있는지 상관없이 Context의 데이터를 읽을 수 있다.

 

<CountProvider>
	<Count/>
</CountProvider>

 

 

 

 

CountContext.jsx

 

export const CountContext = createContext();

const CountProvider = (props) => { //잡을때는 context, 내부에서는 Provider 역할
    //state, 함수 등 모든 처리
    //Provider에는 value라는 props가 있으며, 이것이 데이터를 하위 컴포넌트에게 전달한다.
    const [count, setCount] = useState(0);

    const increment = () => {
        setCount(count + 1)
    }

    const decrement = () => {
        setCount(count - 1)
    }

return (
<CountContext.Provider value={{count, increment, decrement}}>
{/* children은 부모 컴포넌트에서 자식 엘레먼트나 컴포넌트를 포함할 때 자동으로 전달된다. */}
	{props.children}
</CountContext.Provider>
    );
};

export default CountProvider;

 

 

 

Count.jsx

//const count = 0; //모든 데이터는 context에 잡아야한다. 여기서만 사용하면 안되닌까

return (
// 그거에 대한 데이터를 받는다.
<CountContext.Consumer>
{
	({count, increment, decrement}) => (
		<div>
			<button onClick={() => increment()}>UP</button>
		</div>
	)
}
</CountContext.Consumer>

 

---

변경

 

Count.jsx

//<CountContext.Consumer>를 쓰니깐 코드가 복잡해져서, useContext로 바꾼다
const {count, increment, decrement} = useContext(CountContext);

return (
	<div>
		<h1>Count {count}</h1> 
		<p>
			<button onClick={() => increment()}>UP</button>
 			<button onClick={() => decrement()}>DOWN</button>
		</p>
	</div>
);

 

 

App.jsx

 

<ColorProvider>
        <CountProvider>
            <Color/>
            <hr/>
            <Count/>
        </CountProvider>
</ColorProvider>

 

 

ColorContext.jsx

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

export const ColorContext = createContext(); // 관리자 처리

const ColorProvider = (props) => {
    const [color, setColor] = useState('tomato');
    
    const dispatch = (incolor) => {
        setColor(incolor);
    }
    
    return (
        <ColorContext.Provider value={{color, dispatch}}>
            {props.children}
        </ColorContext.Provider>
    );
};

export default ColorProvider;

 

 

Color.jsx

function Color() {
  const {color, dispatch} = useContext(ColorContext);
  const {count} = useContext(CountContext);
  
  return (
    <div>
      <h1 style={{color : color}}>Color {color}, Count {count}</h1>
        <button onClick={() => dispatch('magenta')}>MAGENTA</button>