React, Context, useContext Hook

App.js

import React from 'react';

import ColorBox from './components/ColorBox';
import SelectColors from './components/SelectColors';
import { ColorProvider } from './contexts/color';

const App = () => {
  return (
    <ColorProvider>
      <div>
        <SelectColors />
        <ColorBox />
      </div>
    </ColorProvider>
  );
};

export default App;

 

/contexts/color.jsx

import { createContext, useState } from 'react';

const ColorContext = createContext({
  state: {
    color: 'black',
    subColor: 'red',
    fontSize: '20px',
  },
  actions: {
    setColor: () => {},
    setSubColor: () => {},
    setFontSize: () => {},
  },
});

const ColorProvider = ({ children }) => {
  const [color, setColor] = useState('black');
  const [subColor, setSubColor] = useState('red');
  const [fontSize, setFontSize] = useState('fontSize');
  const value = {
    state: { color, subColor, fontSize },
    actions: { setColor, setSubColor, setFontSize },
  };
  return (
    <ColorContext.Provider value={value}>{children}</ColorContext.Provider>
  );
};

const { Consumer: ColorConsumer } = ColorContext;

export { ColorProvider, ColorConsumer };

export default ColorContext;

 

/components/ColorBox.jsx

import react, { useContext } from 'react';
import ColorContext from '../contexts/color';

const ColorBox = () => {
  const { state } = useContext(ColorContext);
  return (
    <>
      <div
        style={{
          width: '64px',
          height: '64px',
          fontSize: state.fontSize,
          background: state.color,
        }}
      />
      <div
        style={{
          width: '32px',
          height: '32px',
          fontSize: state.fontSize,
          background: state.subColor,
        }}
      />
    </>
  );
};

export default ColorBox;

 

/components/SelectColors.jsx

import React, { useContext } from 'react';
import ColorContext from '../contexts/color';

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];

const SelectColors = () => {
  const { actions } = useContext(ColorContext);

  const handleSetColor = (color) => {
    actions.setColor(color);
  };

  const handleSetSubcolor = (subColor) => {
    actions.setSubColor(subColor);
  };

  return (
    <div>
      <h2>색상을 선택하세요.</h2>
      <div style={{ display: 'flex' }}>
        {colors.map((color) => (
          <div
            key={color}
            style={{
              background: color,
              width: '24px',
              height: '24px',
              cursor: 'pointer',
            }}
            onClick={() => handleSetColor(color)}
            onContextMenu={(e) => {
              e.preventDefault();
              handleSetSubcolor(color);
            }}
          />
        ))}
      </div>
      <hr />
    </div>
  );
};

export default SelectColors;

 

https://stackblitz.com/edit/vitejs-vite-hvvem4gc?embed=1&file=src%2FApp.jsx