15.3.1 Context 파일 수정하기

    Context의 value에는 무조건 상태 값만 있어야 하는 것은 아닙니다. 함수를 전달해 줄 수도 있습니다.

    기존에 작성했던 ColorContext의 코드를 다음과 같이 수정해 주세요. 이번에 코드를 작성한 후 저장하면 오류가 발생할 텐데, 해당 오류는 나중에 수정할 것이므로 걱정하지 마세요.

    contexts/color.js

    import React, { createContext, useState } from 'react';
     
    const ColorContext = createContext({
      state: { color: 'black', subcolor: 'red' },
      actions: {
        setColor: () => {},
        setSubcolor: () => {}
      }
    });
     
    const ColorProvider = ({ children }) => {
      const [color, setColor] = useState('black');
      const [subcolor, setSubcolor] = useState('red');
     
      const value = {
        state: { color, subcolor },
        actions: { setColor, setSubcolor }
      };
      return (
        <ColorContext.Provider value={value}>{children}</ColorContext.Provider>
      );
    };
     
    // const ColorConsumer = ColorContext.Consumer 같은 의미
    const { Consumer: ColorConsumer } = ColorContext;
     
    // ColorProvider ColorConsumer 내보내기
    export { ColorProvider, ColorConsumer };
     
    export default ColorContext;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.