LearnFit
YouTube, Learn useReducer In 20 Minutes
[React - 요약, 번역] 20분 안에 익히는 useReducer
#전체
#개발자
#프론트엔드
#webdevsimplified
#react hooks
#react tutorial
#react js tutorial
#react hooks tutorial
#react hooks project
#learn react hooks
#learn react js
#react beginner
#javascript
#js
#learn usereducer in 20 minutes
#usereducer
#react js usereducer
#usereducer hook
#react usereducer hook
#usereducer tutorial
#reactjs usereducer
#react js usereducer tutorial
#use reducer react js
#learn react usereducer
#react usereducer js
#react reducer hook
#react reducer function
#react reducer
#react
00:00영상 개요(영상 속 내용과는 무관한 필기)
React의 useReducer hook을 설명하는 영상에 대해 요약 및 번역에 집중한 해설노트입니다.
더욱 자세한 정보는 리액트 공식문서의 useReducer 파트를 참조해보세요!
https://reactjs.org/docs/hooks-reference.html#usereducer
00:00영상 시작 전 배경 지식:
-useReducer hook을 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다.
상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용 할 수도 있지요. (useReducer 호출 시 첫 번째 인자로 들어가는 reducer 함수를 두고하는 설명)
-useReducer vs useState - 뭐 쓸까?
일단, 여기에 있어서는 정해진 답은 없습니다. 상황에 따라 불편할때도 있고 편할 때도 있습니다.예를 들어서 컴포넌트에서 관리하는 값이 딱 하나고, 그 값이 단순한 숫자, 문자열 또는 boolean 값이라면 확실히 `useState` 로 관리하는게 편할 것입니다.
하지만, 만약에 컴포넌트에서 관리하는 값이 여러개가 되어서 상태의 구조가 복잡해진다면 useReducer로 관리하는 것이 편해질 수도 있습니다.
출처: https://react.vlpt.us/basic/20-useReducer.html
00:43영상시작
useState로 count를 증가, 감소시키는 App component에 대한 코드 설명
01:03React의 상태관리를 할 때 useState가 유일한 방법은 아니라고 말합니다.
useReducer hook이 존재하기 때문입니다.
01:14useReducer의 원리:
useReducer hook은 복잡한 상태를 다루는데 있어 더욱 정교한 방식으로 접근하게 해줍니다.
current state를 action에 기반해서 update시킬 수 있습니다.(action은 useReducer의 dispatch에 입력됩니다.)
당신이 redux에 익숙하다면 useReducer도 비슷한 패턴처럼 느껴질 것입니다.
01:39useState를 useReducer로 교체해보면서 useReducer의 동작원리를 파악해보는 부분:
useReducer의 parameters:
reducer와 initialValue입니다. reducer는 상태 업데이트 로직을 담은 함수입니다. switch문으로 action.type을 체크하고 그에 따라 로직을 입힌 상태를 return 뒤에 명시하는 방식으로 말이죠. switch에 명시되지 않은 case로의 상태 업데이트는 발생할 일이 없기에 의도한대로만 상태가 업데이트 됩니다.
*해당 영상의 유튜버는 switch문 default의 return으로 current state를 추천한다고 하네요.
initialValue는 초기 state를 의미합니다. primitive value를 initialValue로 넣어도 되지만 보통 useReducer로는 복잡한 상태를 관리하기 때문에 객체나 배열 형태가 많이 들어갑니다.
useReducer의 return value:
[state, dispatch]를 반환합니다. state는 관리되고 있는 state이며 dispatch는 상태를 갱신시킬 때 호출하는 함수입니다. reducer를 state 갱신 로직이라고 말씀드렸는데, 그 로직을 사용하는 곳이 dispatch입니다. dispatch에 {type:...} 객체를 인자로 넘겨서 호출하는 방식으로 reducer에서 어떤 로직을 동작시킬지를 결정합니다.
*유튜버의 방식: reducer에서는 주로 switch문으로 dispatch 호출 시 넘어오는 action.type을 검사하는데, 하드코딩으로 입력해도 좋지만 type-check라던가 오타가 발생할 수도 있기 때문에 전역 객체로 ACTIONS를 선언해두고 여기서 값을 가져오는 것이 좋다고 합니다. 자동 완성되므로 action.type 입력 시 실수 할 확률도 적어지고 reducer 내의 action.type을 수정할 때 ACTIONS의 내부만 수정하면 되기 때문에 전체 코드를 건드릴 필요도 없어서 코드 관리에도 유용하다고 하네요.
07:45useReducer는 count 같은 소소한 상태를 관리하는데는 유용하지 않다고 말합니다. 오히려 복잡한 상태관리를 할 때 유용하다고 하네요.(nesting된 컴포넌트끼리 props로 넘겨받아야하는 복잡한 상태 등을 관리할 때)
08:02To do application을 useReducer로 구현해보면서 복잡한 상태관리에 대해 어떻게 코드를 작성해야하는지 알아보며 useReducer의 power를 보여준다고 하네요.
08:21코드 작성 시작(useReducer를 활용한 To do application)
09:48dispatch의 type을 적을 때 NEW_TODO라고 적는 이유는 이것이 useReducer의 action.type에 대한 convention(관습)이라고 하네요.
출처: https://react.vlpt.us/basic/20-useReducer.html
10:40reducer 함수에서 state(todos)를 활용하는 방식:
state가 객체, 배열일 때 기존 state를 활용해서 새로운 state를 만들어냅니다. 여기서는 기존 todos를 활용해서 새로운 todos를 만들어냈네요.
11:18reducer 함수에서 갑자기 튀어나온 name, 얘는 어디서 오는 것일까요?
name은 dispatch를 호출하는 부분에서 전달됐어야 합니다. reducer 함수에서 state 갱신에 필요로 하는 값이 존재한다면 payload라는 객체에 포함하여 type과 함께 dispatch의 인자로 넘겨줘야 한다고하네요. 참고로 payload는 convention이라고 하니, 다른 keyword를 입력하셔도 무방합니다.
예시: handleSubmit 안에서 dispatch를 호출 할 때 다음과 같은 방식으로 적으면 reducer에서 사용하는 name은 'learnfit 접속하기'가 되겠죠.
dispatch({type: ACTIONS.ADD_TODO, payload: {name: 'learnfit 접속하기'}});
12:26이 부분이 useReducer의 마법이라고 말합니다.
todos에 todo를 추가한다던지, todos의 특정 todo를 편집한다던지, todos의 특정 todo를 삭제한다던지 등을 수행할 때 기존엔 이를 수행할 callback 함수들이 필요했는데 이것을 dispatch함수 하나로 대체할 수 있게 되었으니 말이죠. 어떤 action(ex: 추가, 삭제 ,편집)을 취하고 싶냐에 따라 dispatch 호출 시 action, payload만 적절히 입력해주면 되거든요.
12:59to do application에서 to do의 complete status를 바꿔주는 toggle 기능을 구현합니다(complete가 true면 false로, false면 true로 변경)
13:51rfc: React 함수형 컴포넌트의 boilder template 코드 호출
*Visual Studio Code에서 확장프로그램 'ES7 React/Redux/GraphQL/React-Native snippets' 설치 필요
15:30dispatch 호출 시 action type이 ACTIONS.TOGGLE_TODO일 때 state가 update되는 방식
16:29TOGGLE_TODO action을 위해서 payload 객체에 id가 필요합니다. id는 어디서 오는 것일까요? 바로 Todo 컴포넌트의 toggle 버튼에서 옵니다. 영상을 쭉 따라가보죠.
17:32다른 파일에서도 ACTIONS 객체를 사용하게 하기 위해 export해줍니다.
18:09delete 기능도 dispatch로 구현합니다.
(toggle 기능과 비슷)
19:18todos를 위한 기능이 필요할 때마다 reducer에 새로운 action type의 형태로 추가해주면 됩니다.
그리고 단지 dispatch 호출만으로 reducer에 명시된 action들을 다룰 수 있습니다. 수 많은 handler가 필요했던 기존 방식 대신에 하위 컴포넌트(ex: Todo)에 dispatch만 전달하면 되므로 코드는 훨씬 간결해지고 간단해집니다.
19:55영상 끝
✔ 학습 완료
이 학습노트가 포함된 러닝패스예요.
서원석님의 다른 노트는 어때요?
서원석
의 학습노트
리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)
Video
⏱ 핵심 스탬프25개
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
서원석
의 학습노트
리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현
Video
⏱ 핵심 스탬프8개
00:00
해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다.
공식 문서: https://reactrouter.com/
00:50
react router 버전5에서 redirect를 구현하는 방법입니다.
*예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨
*특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.
👍
4
👋 다양한 인사이트를
읽어보고 계신가요?
나만의 학습 기록을 남기고,
관리하고 싶다면!
다양한 전문가의 멤버십 전용
콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고,
수익을 올리고 싶다면!
3초 회원가입/로그인으로,
런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기