LearnFit
YouTube, Learn Custom Hooks In 10 Minutes
[React - 요약, 번역] useLocalStorage 만들며 React custom hook 익히기
#전체
#개발자
#프론트엔드
#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 custom hooks in 8 minutes
#custom hooks
#react js custom hooks
#custom hook
#react custom hook
#custom hooks tutorial
#reactjs custom hooks
#react js custom hooks tutorial
#custom hooks react js
#learn react custom hooks
#react custom hooks js
#react custom hooks function
#react
#react custom hooks
00:00영상 개요(영상 속 내용과는 무관한 필기)
custom hook을 구현하는 영상에 대해 요약 및 번역에 집중한 해설노트입니다.
더욱 자세한 정보는 리액트 공식문서의 나만의 훅 만들기 파트를 참조해보세요!
https://ko.reactjs.org/docs/hooks-custom.html#using-a-custom-hook
00:33영상 시작(여기서부터 따라와주세요)
input 창에 텍스트를 입력하고 수정할 수 있는 간단한 react app을 useState로 구현한 코드입니다.
해당 코드로 구현된 app은 새로고침 시 input 창에 적혔던 텍스트가 지워지는데요, local storage를 활용하여 새로고침 후에도 텍스트가 남아있도록 구현한다고 합니다.
이 기능을 구현할 때 커스텀 훅 방식으로 구현할 것이라고 하네요.
01:08커스텀훅 작성 시 규칙
커스텀 훅의 이름을 지을 땐 rule이 있다고합니다. 그건 바로 prefix로 use를 붙이는 것입니다.
01:33커스텀 훅인 useLocalStorage 구현 시작
useLocalStorage를 보면 내부에 useState가 호출된 것을 알 수 있고 value와 setValue를 배열로 묶어서 반환합니다.
아직까진 일반적인 useState와 크게 다르지 않습니다(새로고침 후에 초기화)
03:27useLocalStorage에 key를 prop으로 추가합니다. (기존의 initialValue까지 prop이 두 개)
useLocalStorage속 useState의 초기 값을 결정할 때 getSavedData라는 함수를 사용합니다.
getSavedData는 localStorage에 해당 key에 일치하는 data가 있는지 비교한 후에 존재한다면 대응하는 값을, 없으면 initialValue를 return합니다.
*useState는 함수를 인자로 받을 수 있습니다.
*getSavedData에서 initialValue가 함수인지 아닌지 검증한 방식은 instanceof 입니다.
05:58useEffect에 effect 함수를 넘겨서 value를 localStorage에 저장합니다.
이때 useEffect의 dependancy array에 value가 담겨있기 때문에 value가 변경될 때마다 effect 함수가 호출됩니다.
*참고로 value를 변경하는 트리거는 input tag에 붙어있는 onChange에 존재합니다.
07:07커스텀 훅의 장점은 커스텀 훅이 얼마나 복잡하게 구현됐는지와 상관없이 필요로 하는 곳에 간편히 호출해서 적은 양의 코드로 복잡한 코드를 사용가능하다는데 있습니다.
07:40이 뒷 부분은 보실 필요가 없습니다
*다른 custom hook에 대해 구현하고 설명하는 부분인데 궁금하신 분들만 보시면 될거 같아요.
✔ 학습 완료
이 학습노트가 포함된 러닝패스예요.
서원석님의 다른 노트는 어때요?
서원석
의 학습노트
리액트로 이미지 미리보기 구현(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초 만에 가입하기