34_TIL_221215

young0_0·2022년 12월 15일

TIL

목록 보기

33/92

34일 차 회고

노션으로 정리하기

매니저님이 알려주신 노션으로 정리 하기 스킬을 사용 했는데 너무 맘에 든다.
TIL을 좀 더 자세히 쓰기위해서 노력 하는 중 인데 완벽하게 하려니 자꾸 임시저장하는
글이 많아 진다.. ㅠ 뭐라도 써야 머리에 남는다. 뭐라도 쓰자✏️

redux -2

action

리듀서에 보낼 명령, 리듀서에서 내가 어떤 Action을 하길 원한다를 코드로 나타낸것이다.
‘객체’ 로 만들어야 한다. ⇒ 액션객체 라고한다.
type이라는 key를 가지고 있으며 객체 안에서 type이라는 key를 본다.
type 의 value는 대문자로 작성한다.(상수)

{type : 'PLUS_ONE'}

useDispatch

액션 객체를 리듀서로 보내주는 역할을 하는 훅. (전달자 함수)

useDispatch import
dispatch 변수 생성
dispatch 함수 안에 액션객체 넣기 ⇒ 리듀서로 내보내고 싶은 액션객체

import React from 'react'
import {useDispatch} from 'react-redux'  //1. useDispatch import

const App = () =>{
	const dispatch = useDispatch() // 2. distpatch 변수생성
	return(
		<div>
			<button onclick={()=>{
				dispatch({type:'PLUS_ONE'}) //3 dispatch 함수
			}}>+1</button>
		</div>
	)
}

reducer

디스패치를 통해 전달받은 액객체를 검사하고, 조건이 일치했을때 새로운 상태값을 만들어 내는 함수.

switch 문 작성
case 추가 (action_type 추가)
dispatch로부터 전달 받은 action의 type 일때 return 실행

//초기값
const initialState= {
	number :0
}

//리듀서
const counter = (state = initialState, action) => {
	switch(action.type){ //1.switch 문 작성
		case 'PLUS_ONE': //2.case 추가 (action_type 추가)
			return { //3.dispatch로부터 전달 받은 action의 type 일때 return 실행
				number: state.number + 1
			}
		default:
			return state;
	}
}

export default counter;

useSelector

컴포넌트에서 변경된 state확인 할 수 있다.
클릭 할때 리덕스에 존재하는 state 값이 변경 되면 useSelector를 하고있는 컴포넌트들도 모두 다시 리렌더링 된다.

컴포넌트에서 useSelector import
useSelector 로 액션객체 확인

import React from 'react'
import {useDispatch, useSelector} from 'react-redux';

const App = ()=> {
	const dispatch = useDispatch();
	
	const number = useSelector((state)=> state.counter.number);

	return(
		<div>
			{number}
			<button onClick={()=>{
				dispatch({type:'PLUS_ONE'})	
			}}> +1</button>
		</div>
	)
}

export default App;

Action Creator

액션 객체를 한 곳에서 관리 할 수 있도록 “함수” 와 액션 value를 상수로 만든다.

const PLUS_ONE = "PLUS_ONE" //Value 상수 생성

//export가 붙은 이유 => 밖으로 나가서 사용 될 함수 이기 때문이다.
export const plustOne = () => {
	return {
		type: PLUS_ONE
	}
}

// 초기 상태값
const initialState = {
  number: 0,
};

// 리듀서
const counter = (state = initialState, action) => {
  switch (action.type) {
    case PLUS_ONE: // case에서도 문자열이 아닌, 위에서 선언한 상수를 넣어줍니다. 
      return {
        number: state.number + 1,
      };
    case MINUS_ONE: // case에서도 문자열이 아닌, 위에서 선언한 상수를 넣어줍니다. 
      return {
        number: state.number - 1,
      };
    default:
      return state;
  }
};

export default counter;

action creator를 사용하는 이유.
1. 휴먼에러 (오타)방지
2. 유지보수 효율성 증가 - 한 곳에서 수정처리를 하면 import 한 모든 곳에서 변경이 가능하다.
3. 코드 가독성

Action Creator 사용

export 된 Action Creator import
dispatch()에 있던 액션객체 지우고, Action creato 넣기.

import React from 'react'
import {useDispatch, useSelector} from 'react-redux'

//1. export 된 Action Creator import
import {plusOne} from './redux/moules/counter'

const App =() => {
	const dispatch = useDispatch();
	const number = useSelector((state) =>state.counter.number)

	return(
		<div>
			{number}
			<button onClick={()=>{
				dispatch(plusOne()) //dispatch()에 있던 액션객체 지우고, Action creato 넣기.
			}}>+1</button>
		<div>
	)
}

payload

Action Creator를 생성할 때 매개변수에 자리에서 받을 준비를 하고, 반환하는 액션객체에 payload라는 key와 받은 매개변수를 value로 하여 구현한다.
payload가 필요한 Action Creator에서는 함수를 선언할 때 매개변수 자리에 playload를 넣어줘야 한다.

//Action Value
const ADD_NUMBER ="ADD_NUMBER"

//ACtion Creator
export const addNumber = (payload) =>{
	return {
		type:ADD_NUMBER,
		payload
	}
}

// 리듀서

const counter = (state = initialState, action) => {
  switch (action.type) {
    case ADD_NUMBER:
      return {
				// state.number (기존의 nubmer)에 action.paylaod(유저가 더하길 원하는 값)을 더한다.
        number: state.number + action.payload,
      };
    default:
      return state;
  }
};

사용자가 컴포넌트에서 Action Creator로 payload를 담아 보내는 것은 액션객체에 담겨지고, 담겨진 것은 리듀서에서 action.payload에서 꺼내 사용 할수 있다.

App.js 에서 사용하기

import React from "react";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";

// Action Creator를 import 합니다.
import { addNumber } from "./redux/modules/counter"; 

const App = () => {
	// 1. dispatch를 사용하기 위해 선언해줍니다.
  const dispatch = useDispatch();
  const [number, setNumber] = useState(0);
  const globalNumber = useSelector((state) => state.counter.number);

  const onChangeHandler = (event) => {
    const { value } = event.target;
    setNumber(+value);
  };

	// 2. 더하기 버튼을 눌렀을 때 실행할 이벤트핸들러를 만들어줍니다.
  const onClickAddNumberHandler = () => {
		// 5. Action creator를 dispatch 해주고, 그때 Action creator의 인자에 number를 넣어줍니다.
    dispatch(addNumber(number));
  };

  return (
    <div>
      <div>{globalNumber}</div>
      <input type="number" onChange={onChangeHandler} />
			{/* 3. 더하기 버튼 이벤트핸들러를 연결해줍니다. */}
      <button onClick={onClickAddNumberHandler}>더하기</button>
      <button>빼기</button>
    </div>
  );
};

export default App;