관심사 분리

• 리액트 컴포넌트는 렌더링하고, 사용자 인터페이스를 최신 상태로 유지하는 일에만 집중
• 리액트 훅은 앱이 작동할때 필요한 로직에 집중
• 컴포넌트와 훅의 분리
  • 결합도 낮춤
• 아래 예제
  • 커스텀 훅으로 만들고
  • 콘텍스트 소비자에게 콘텍스트를 노출 없이, 지원하는 함수 제공으로 캡슐화
  • 커스텀 훅 제공 useColors
  • Provider wrapper로 만들어서 간편히 사용 ColorProvider

•   import React, { createContext, useState, useContext } from "react";
    import colorData from "./color-data.json";
    import { v4 } from "uuid";
    const ColorContext = createContext();
    
    export const useColors = () => useContext(ColorContext);
    
    export default function ColorProvider({ children }) {
    	const [colors, setColors] = useState(colorData);
    	const addColor = (title, color) => setColors([ ...colors,
    		{
    			id: v4(),
    			rating: 0,
    			title,
    			color
    		}
    	]);
    	
    	const rateColor = (id, rating) => setColors(colors.map(color => (color.id === id ? { ...color, rating } : color)));
    	
    	const removeColor = id => setColors(colors.filter(color => color.id !== id));
    
    	return (
    		<ColorContext.Provider value={{ colors, addColor, removeColor, rateColor }}>
    		{children}
    		</ColorContext.Provider>
    	);
    }