React 6.

Context API

• Context API는 리액트 프로젝트에서 전역적으로 사용하는 데이터가 있을 때 유용
• 사용자 정보와 같이 모든 컴포넌트에서 접근 가능한 상태를 관리할 때 사용
• 새 Context를 만들 때에는 createContext함수 사용
• Consumer Component: Context의 변화를 감지
• Provider Component: Context의 value를 변경
  - Provider 사용할 때 변경할 value 값을 명시해야 함

좌클릭하면 큰 박스의 색상변경
우클릭하면 작은 박스의 색상변경

App.js

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

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

export default App;

color.js

import { createContext, useState } from "react";

const ColorContext = createContext({
  state: { color: "black", fontColor: "red" },
  actions: {
    setColor: () => {},
    setFontColor: () => {},
  },
});

const ColorProvider = ({ children }) => {
  const [color, setColor] = useState("black");
  const [fontColor, setFontColor] = useState("red");

  const value = {
    state: { color, fontColor },
    actions: { setColor, setFontColor },
  };

  return (
    <ColorContext.Provider value={value}>{children}</ColorContext.Provider>
  );
};

// ColorContext.Consumer를 ColorConsumer라는 변수에 담아줌
const { Consumer: ColorConsumer } = ColorContext;

// ColorProvider, ColorConsumer 내보내기
export { ColorProvider, ColorConsumer };

export default ColorContext;

ColorBox.js

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

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

export default ColorBox;

SelectColor.js

import React from "react";
import { ColorConsumer } from "../contexts/color";

const colors = ["red", "orange", "yellow", "green", "blue", "navy", "purple"];

const SelectColors = () => {
  return (
    <div>
      <h2>Choose Color</h2>
      <ColorConsumer>
        {({ actions }) => (
          <div style={{ display: "flex" }}>
            {colors.map((color) => (
              <div
                key={color}
                style={{
                  background: color,
                  width: "24px",
                  height: "24px",
                  cursor: "pointer",
                }}
                onClick={() => actions.setColor(color)}
                onContextMenu={(e) => {
                  e.preventDefault();
                  actions.setFontColor(color);
                }}
              />
            ))}
          </div>
        )}
      </ColorConsumer>
      <hr />
    </div>
  );
};

export default SelectColors;

Redux library

• 리액트에서 가장 많이 사용되는 상태관리 라이브러리
• 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리하여 효율적으로 관리
• 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있음
• 상태를 더욱 체계적으로 관리할 수 있어서 규모가 큰 프로젝트에서 사용
• 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리

Action

• 상태에 어떠한 변화가 있을 때마다 발생
• 하나의 객체 형태로 표현
• 액션 객체는 반드시 type필드를 가지고 있어야 함

{
	type: 'ADD_TODO',
    data: {
      id: 1,
      text: 'learning redux'
    }
}

• 액션 생성 함수 : 액션 객체를 만들어주는 함수

function addTodo(data) {
	return {
    	type: 'ADD_TODO',
    	data
   	}
}

const addTodo = (data) => {
	return {
    	type: 'ADD_TODO',
    	data
    }
}

Reducer

• 변화를 일으키는 함수
• 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아옴
• 파라미터로 받아온 두 값을 참고하여 새로운 상태를 만들어서 반환

function reducer(atate, action) {
	switch(action.type) {
      case "ADD_TODO":
    	return {
        	새로운 상태 값;
        }
      default:
        return state;
    }
}

Store

• 프로젝트에 리덕스를 적용하기 위해 만드는 객체
• 현재 어플리케이션의 상태와 리듀서, 그리고 몇 가지의 내장함수 가지고 있다.
• 하나의 프로젝트에는 하나의 스토어만 생성 가능

Dispatch

• 스토어의 내장함수
• 액션을 발생시킴
• dispatch(action)
• 디스패치가 호출되면 리듀서함수를 실행시켜서 새로운 상태를 만들어줌

Subscribe

• 스토어의 내장함수 중 하나
• 구독 함수 파라미터로 함수를 보내주면 액션이 발생되어 상태가 변경될 때마다 파라미터로 전달된 함수가 실행됨

React Redux Project

• 가장 많이 사용하는 패턴은 프레젠테이션 컴포넌트와 컨테이너 컴포넌트를 분리하여 만드는 패턴
  - 프레젠테이션 컴포넌트: props를 받아서 화면에 UI만 보여주는 컴포넌트
  - 컨테이너 컴포넌트: 리덕스와 연동되어 있는 컴포넌트로 리덕스로부터 상태를 받아오거나 액션을 디스패치하기도 함