- 리액트 라이프사이클 특강 복습
- useEffect() 훅이 계속 언급됐는데 바로 생각나지 않아서 복습 확정..
- 리액트 심화 완강
- 리액트 스터디
- 투두리스트 라이브코딩- 오늘은 내 턴이다
인풋 컴포넌트 만들어야 될 것 같아서 혼자 리허설도 해봄..머뭇대면 민망하니께..😅 아니 이사람들이(스터디원들).. 특강이랑 겹쳐서 오늘 스터디 펑 됐다..따흑..
- 투두리스트 라이브코딩- 오늘은 내 턴이다
- TIL 제출
- 유데미 강의 킵고잉
useEffect
📌 useEffect 훅이 속한 컴포넌트가 화면에 렌더링될 때 실행된다.
in React Lifecycle 특강
commit 단계의 Side Effect를 실행하는 훅
Side Effect 란?데이터 가져오기
구독 설정하기
수동으로 리액트 컴포넌트의 DOM 수정하기
리액트 심화
🤚🏻 리덕스 미들웨어
원래는 dispatch되자마자 reducer가 호출(?)되니까 그 중간에 특정 작업을 넣어주기 위해서는 미들웨어가 필요하다!
즉, 미들웨어를 사용하면 액션이 리듀서로 전달돠는 중간에 어떤 작업을 할 수 있게 된다.
Thunk
dispatch(함수)
dispatch(함수) > 함수 실행 > 함수 안에서 dispatch(객체)
📌 객체가 아닌 함수를 dispatch할 수 있게 해준다.
createAsyncThunk() API
thunk를 쓰기 위해 툴킷에서 제공하는 API
createAsyncThunk(액션 밸류, 함수) <- 첫 번째 인자: 액션 타입에 대한 prefix
두 번째 인자(payload creator) : DB를 입력하는 과정이 들어있는 로직
- 함수에 첫 번째 인자: payload / 두 번째 인자 thunk api
(첫 번째 인자가 아무이름 ex) (, thunkAPI) 가능 - 가 아무 역할도 안하기 때문
// thunk 함수는 createAsyncThunk 라는 툴킷 API를 사용해서 생성합니다. // __가 함수 이름에 붙는 이유는 이 함수가 thunk 함수라는 것을 표시하기 위한 // 개인의 convention 입니다. 함수의 이름은 본인이 편한 이름으로 명명하세요. export const __addNumber = createAsyncThunk( "ADD_NUMBER_WAIT", (arg, thunkAPI)=>{}, );
arg - 컴포넌트에서 사용자가 input에 입력한 값 (counter app 실습 중)
setTimeout()
리덕스 thunk에 대한 실습을 하던 중에 코드에 setTimeout이 나와서 생각난김에 다시 복습해보았다.
setTimeout(코드, delay);
setTimeout함수
Thunk에서 Promise 다루기
redux toolkit - thunk 를 이용해서 비동기 작업을 처리하는 방법
생활코딩 영상을 추가로 보니까 이해도 10정도 올라감..
extraReducers
동기적 작업 : reducers - 툴킷이 액션 크리에이터를 자동으로 생성해줌
비동기적 작업 : extraReducers - 액션 크리에이터를 자동으로 만들어주지 않음 << 그래서 비동기 작업에 쓰는건가..!
