context API 사용법 2탄

TOC

1. context API의 심화와 생각외로 얻은 것
2. context API의 심화

1. context API의 심화와 생각외로 얻은 것

우선 생각외로 얻은 것에 대해 알아보자.

const ColorProvider = ({ children }) => {
  const [color, setColor] = useState('orange');
  const [subcolor, setSubcolor] = useState('blue');

  const value = {
    state: { color, subcolor },
    actions: { setColor, setSubcolor },
  };
  return (
    <ColorContext.Provider value={value}>{children}</ColorContext.Provider>
  );
};

위 코드는 하나의 custom hook이다.

parameter로 {children}을 받고 있고

return으로

<ColorContext.Provider value={value}>{children}</ColorContext.Provider>

를 건네주고 있다.

이를 단순히 하면

<HookFirst>
...  
</HookFirst>

const HookSecond=({children})=>{
...
return (<HookFirst>{children}</HookFirst>)
}

의 형태를 띄고 있다.

이렇게 되면 children은 HookSecond의 children node가 된다.

이를 index 관점에서 보면

<>
 <HookSecond>
  <div>🤔</div>
 </HookSecond>  
</>

<div>🤔</div>

자식인 div태그는 HookFirst 태그의 영향도 받고 있는 것이다.

이는 Context API를 사용하는 경우 에러가 없이 잘 작동한다. 다른 경우에는 아직 실험해보지 못하였다.

2. context API의 심화

위의 코드를 잘 보고

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

const ColorContext = createContext({
  state: { color: '', subcolor: '' },
  actions: {
    setColor: () => {},
    setSubcolor: () => {},
  },
});
const ColorProvider = ({ children }) => {
  const [color, setColor] = useState('orange');
  const [subcolor, setSubcolor] = useState('blue');

  const value = {
    state: { color, subcolor },
    actions: { setColor, setSubcolor },
  };
  return (
    <ColorContext.Provider value={value}>{children}</ColorContext.Provider>
  );
};

const ColorConsumer = ColorContext.Consumer;
// const {Consumer:ColorConsumer}=ColorContext
export { ColorProvider, ColorConsumer };
export default ColorContext;

위 코드를 잘 보자

코드를 3가지로 끊어서 보면 이해가 조금 더 쉽다

1. createContext

const ColorContext = createContext({
  state: { color: '', subcolor: '' },
  actions: {
    setColor: () => {},
    setSubcolor: () => {},
  },
});

2. ColorProvider

const ColorProvider = ({ children }) => {
  const [color, setColor] = useState('orange');
  const [subcolor, setSubcolor] = useState('blue');

  const value = {
    state: { color, subcolor },
    actions: { setColor, setSubcolor },
  };
  return (
    <ColorContext.Provider value={value}>{children}</ColorContext.Provider>
  );
};

ColorProvider Hook은 return값으로 createContext를 생성하는 ColorContext를 생성하고
value를 넘겨줍니다.

ColorContext는 새로 createContext를 생성하고 value를 받아 state에는 color, subcolor를,
actions에는 setColor, setSubcolor를 할당합니다.

  state: { color: '', subcolor: '' },
  actions: {
    setColor: () => {},
    setSubcolor: () => {},
  },

전달받은 value는 위의 코드에 자신의 자리에 맞게 mapping됩니다.

ColorConsumer

const ColorConsumer = ColorContext.Consumer;

createContext 생성자인 ColorContext.Consumer 속성을 export합니다.
contextAPI 1탄 처럼 해당 component자체를 전부 불러오게 된다면 context 생성자인 ColorContext는 더이상 context 객체 하나만을 담고 있지 않고 2가지 hooks를 가지고 있기 때문에

다른 컴포넌트에서 불러 Consumer 속성을 사용하면 에러가 발생합니다.

Consumer 속성을 따로 선언해 export 해주어야 합니다.

현재는 위에서 선언한

const ColorProvider = ({ children }) => {
  const [color, setColor] = useState('orange');
  const [subcolor, setSubcolor] = useState('blue');

  const value = {
    state: { color, subcolor },
    actions: { setColor, setSubcolor },
  };
  return (
    <ColorContext.Provider value={value}>{children}</ColorContext.Provider>
  );
};

value 중 actions는 사용하지 않았습니다.

다음 포스트에서 actions를 사용해보도록 합시다.

정리하면

ColorProvider는 위에서 선언한 ColorContext를 return부분에서 호출하고 Provider 속성을 사용해 value값을 자신의 state값을 넘겨준다.

ColorProvider로 감싼 하위 컴포넌트들은 children이 되고 이는 ColorProvider의 인자와 같다.

ColorContext는 자신 이외의 다른 hooks를 가지고 있으므로 export default 시 모든 code를 반환한다.

따라서 ColorConsumer=ColorContext.Consumer;처럼 따로 속성을 분리해 export 해주어야 한다.