오늘 한 것들..
리액트 숙련 강의
리덕스 과제 시작하기
후발대 영상 찍기
스터디 참여
TIL 쓰기
스터디에서 라이브 코딩을 시작했다. 가르쳐주는 사람도, 더듬더듬 코드를 치는 사람도 실력이 많이 늘 것이라는 튜터님의 조언에 모두가 혹해서..
우선은 리덕스를 사용하지 않은 입문 강의때 했던 기본적인 투두리스트를 만들고, 완성이 되면 리팩토링 하는 것으로 가닥이 잡혔다🥹
며칠 안썼다고 잊어버린 깃도 쓰고, 다시 불태워보자~
리덕스를 이용한 카운터 만들기 실습
강의를 멈추고 빼기 기능을 직접 만들어보니 리듀스 동작 원리를 이해할 수 있었다.
action value
는 상수
로 만들어준다.이거 왜 써야되는데!
1. human error를 줄여준다. (상수로 만들어놔서)
2. 유지보수 효율성이 증가한다. - 수정 시 Action Creator에서 한번에 수정하여 적용할 수 있기에!
3. 코드 가독성이 올라간다. (모듈의 리듀서 파일에서 한눈에 확인 가능)
매개변수
로 넣어준다.// src/redux/modules/counter.js
// Action Value
const ADD_NUMBER = "ADD_NUMBER";
const MINUS_NUMBER = "MINUS_NUMBER";
// Action Creator
export const addNumber = (payload) => {
return {
type: ADD_NUMBER,
// payload: payload, 키 밸류가 같으면 축약해서 작성(ES6)
payload,
};
};
export const minusNumber = (payload) => {
return {
type: MINUS_NUMBER,
payload,
};
};
// Initial State
const initialState = {
number: 0,
};
// Reducer
const counter = (state = initialState, action) => {
switch (action.type) {
case ADD_NUMBER: {
return {
// 리듀서에서 payload를 사용하고자 할 때 => action.payload
number: state.number + action.payload,
};
}
case MINUS_NUMBER: {
return {
number: state.number - action.payload,
};
}
default:
return state;
}
};
// export default reducer
export default counter;
// App.js
import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { addNumber, minusNumber } from "./redux/modules/counter";
const App = () => {
const [number, setNumber] = useState(0);
// useSelector를 할당할 변수
// useSelector : store에 있는 값을 가져오는 HOOK
const globalNumber = useSelector((state) => state.counter.number);
const dispatch = useDispatch();
// 이벤트핸들러를 통해 input과 state를 연결
const handleInput = (event) => {
const { value } = event.target;
// 문자열->숫자 형변환 '+'
setNumber(+value);
};
console.log(number);
//더하기 버튼 이벤트핸들러
// action creator를 dispatch해주고 인자로 number를 넣어준다.
const onClickAddNumberHandler = () => {
dispatch(addNumber(number));
};
// 빼기 버튼 이벤트핸들러
const onClickMinusNumberHandler = () => {
dispatch(minusNumber(number));
};
return (
<div>
{globalNumber}
{/* 밸류를 넣을 인풋 */}
<input type="number" onChange={handleInput} />
<button onClick={onClickAddNumberHandler}>더하기</button>
<button onClick={onClickMinusNumberHandler}>빼기</button>
</div>
);
};
export default App;
+
활용
setNumber(+value);
📌 module 파일 1개에 action-type, action creator, reducer가 모두 존재하는 작성 방식