오늘 한 것들..
-
리액트 숙련 강의실습 다시 정리하기
-
리덕스 과제 시작하기
틀만..짜놓음..
-
후발대 영상 찍기
- 새벽에..
-
스터디 참여
-
TIL 쓰기
스터디에서 라이브 코딩을 시작했다. 가르쳐주는 사람도, 더듬더듬 코드를 치는 사람도 실력이 많이 늘 것이라는 튜터님의 조언에 모두가 혹해서..
우선은 리덕스를 사용하지 않은 입문 강의때 했던 기본적인 투두리스트를 만들고, 완성이 되면 리팩토링 하는 것으로 가닥이 잡혔다🥹
며칠 안썼다고 잊어버린 깃도 쓰고, 다시 불태워보자~
redux 실습
리덕스를 이용한 카운터 만들기 실습
강의를 멈추고 빼기 기능을 직접 만들어보니 리듀스 동작 원리를 이해할 수 있었다.
📝 리덕스_Action Creator
- action -> dispatch -> reducer 순으로 동작
Action Creator
- action 객체를 반환하는 함수
action value는상수로 만들어준다.
이거 왜 써야되는데!
1. human error를 줄여준다. (상수로 만들어놔서)
2. 유지보수 효율성이 증가한다. - 수정 시 Action Creator에서 한번에 수정하여 적용할 수 있기에!
3. 코드 가독성이 올라간다. (모듈의 리듀서 파일에서 한눈에 확인 가능)
payload
- reducer로 보내는 action 객체에 보내줄 정보를 담아준다.
- Action Creator의
매개변수로 넣어준다.
UseSelector
- store에 있는 값을 가져오는 Hook
- store의 값을 조회한다.
counter 실습 코드🔧
// 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;
TIPS
문자열 형변환
- 문자열 -> 숫자 형변환 :
+활용setNumber(+value);
리스트업
- 모듈을 만들 때 일단 빈 코드창에 미리 리스트업하는 습관을 들이자
- 주석으로 대략적인 스키마를 짜놓는다.
Ducks pattern
- reducer 함수를 export default 한다.
- Action Creator 함수들을 export 한다.
- action type - app, reducer, action-type 형태로 작성한다.
📌 module 파일 1개에 action-type, action creator, reducer가 모두 존재하는 작성 방식
해뜰날