[WIL] 내배캠4기 React 8주차

주간에 배웠던 내용 중 이것 만은 기억에 남기자하는 것들을 써본다.

Slice API

• 이 API를 통해 일반 리덕스를 사용했던 코드처럼 Action Value, Action Creator를 직접 만들지 않아도 되고,
  Action Value, Action Creator, Reducer가 하나로 생성된다.

//createSlice API 뼈대
const counterSlice = createSlice({
	name: '', // 이 모듈의 이름
	initialState : {}, // 이 모듈의 초기상태 값
	reducers : {}, // 이 모듈의 Reducer 로직
})

• name, initialState, reducer는 필수 작성

reducers: {
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },
    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

• 리듀서 객체 안에 작성한 함수가 리듀서의 로직인 동시에 Action Creator가 된다!

Thunk

dispatch(함수)
dispatch(함수) > 함수 실행 > 함수 안에서 dispatch(객체)

📌 객체가 아닌 함수를 dispatch할 수 있게 해준다.

createAsyncThunk() API

thunk를 쓰기 위해 툴킷에서 제공하는 API
createAsyncThunk(액션 밸류, 함수) <-함수에 첫 번째 인자: payload / 두 번째 인자 thunk api

// thunk 함수는 createAsyncThunk 라는 툴킷 API를 사용해서 생성합니다.
// __가 함수 이름에 붙는 이유는 이 함수가 thunk 함수라는 것을 표시하기 위한  
// 개인의 convention 입니다. 함수의 이름은 본인이 편한 이름으로 명명하세요.
export const __addNumber = createAsyncThunk(
	"ADD_NUMBER_WAIT",
	(arg, thunkAPI)=>{},
);

arg - 컴포넌트에서 사용자가 input에 입력한 값 (counter app 실습 중)

setTimeout()

리덕스 thunk에 대한 실습을 하던 중에 코드에 setTimeout이 나와서 생각난김에 다시 복습해보았다.

setTimeout(코드, delay);
setTimeout함수

이전 State에 의존하는 State 업데이트

투두리스트에서 입력받은 제목과 내용을 state에 업데이트 시켜줘야 한다.
원래는 하나씩 독립적인 state를 만들어줬는데, 다른 방법도 있다고한다!

const [userInput, setUserInput] = useState({
	title: '',
	content: '',
 })

다만 하나의 State로 관리해주면 이전 상태의 스냅샷(오래됐거나 잘못된 스냅샷)을 가져오는 불상사가 생길 수 있어 주의해야 한다.

좀 더 안전한 방법

const titleChangeHandler = (event) => {
setUserInput((prev)=>{
	return {...prev, title: event.target.value};
 });
 }

이렇게 setState함수 안에 화살표함수를 써주면 항상 최신 상태의 스냅샷을 가져온다고 한다.