LearnFit
YouTube, Learn useState In 15 Minutes - React Hooks Explained
[React - 노트] 15분 안에 익히는 useState
#전체
#개발자
#프론트엔드
#webdevsimplified
#usestate
#react usestate
#usestate react
#react js usestate
#usestate hook
#react hooks
#react usestate hook
#usestate tutorial
#react tutorial
#react js tutorial
#reactjs usestate
#react js usestate tutorial
#use state react js
#reactjs use state
#js use state
#react hooks tutorial
#react hooks project
#learn react hooks
#learn react usestate
#react state
#react js state
#learn react js
#learn usestate in 15 minutes
#react usestate js
#react beginner
00:00영상 개요(영상 속 내용과는 무관한 필기)
React의 useState hook을 설명하는 영상에 대해 다시 상기하려고 노트하는 것에 집중한 해설노트입니다.
*만약 useState를 잘 모르시는 분들이라면 useState가 hook의 시작인만큼 중요한 개념이므로, 해설노트에 언급되지 않은 부분도 집중해서 시청하시길 추천드립니다.
더욱 자세한 정보는 리액트 공식문서의 useState 파트를 참조해보세요!
https://reactjs.org/docs/hooks-reference.html#usestate
00:49영상 시작
02:39함수형 컴포넌트에서만 hook 사용가능
03:03hook은 늘 같은 순서, 갯수로 호출 되어야합니다(조건적인 호출 금지)
04:32useState 코드 작성 시작
*initial value로 입력하는 default value는 첫 렌더링 시에만 return 값에 영향을 주며 그 이후의 렌더링에서는 return 값에 영향을 주지 않습니다.
06:08setState로 state를 update하면 컴포넌트는 re-rendering하게 됩니다.
그리고 다시 state를 받아오게 되는데 이 state는 이전 rendering의 것과 다릅니다.(referential하게)
06:34setState를 할 때 현재 state의 값을 토대로 값을 변경하는 것이라면 인자로 값이 아닌 함수를 넘겨야합니다.
예시1: count가 4에서 3으로 변경
setCount(count - 1);
setCount(count - 1);
예시2: count가 4에서 2로 변경
setCount(prev => prev - 1);
setCount(prev => prev - 1);
예시1에서 count는 현재 렌더링 버전의 count입니다. 즉 4이죠. 4 - 1은 3입니다. setCount(3)이 두 번 호출되는 것입니다.
예시2에서는 함수를 통해 useState가 관리하는 actual count의 값을 update시킵니다. 첫 번째 prev => prev - 1을 통해 count가 3이 되는 것이고 두 번째 prev => prev - 1을 통해 count가 2가 되는 것이죠.
09:05⭐️ useState의 초기 값으로 보통 하드코딩으로 문자열이나 숫자를 넣습니다. 그렇지만 함수형태로 입력될 때도 있습니다.
만약 함수(호출형태)가 입력된다면 rendering이 될 때마다 호출됩니다. 만약 함수가 복잡한 내용일 경우는 performance overhead가 발생하겠죠.
이때 함수(선언형태)로 입력하면 첫 번째 렌더링 시에만 호출되고 그 이후의 렌더링에서는 호출되지 않습니다. ⭐️
15:28영상 끝
✔ 학습 완료
이 학습노트가 포함된 러닝패스예요.
서원석님의 다른 노트는 어때요?
서원석
의 학습노트
리액트로 이미지 미리보기 구현(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초 만에 가입하기