React 6.

awesomee·2022년 7월 5일
0

React

목록 보기
6/6
post-thumbnail

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만 보여주는 컴포넌트
    - 컨테이너 컴포넌트: 리덕스와 연동되어 있는 컴포넌트로 리덕스로부터 상태를 받아오거나 액션을 디스패치하기도 함
profile
개발을 배우는 듯 하면서도

0개의 댓글