뒤로 가기
홈으로 이동
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
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기