LearnFit
YouTube, Learn useRef in 11 Minutes
[React - 요약, 번역] 11분 안에 익히는 useRef
#전체
#개발자
#프론트엔드
#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 useref in 11 minutes
#useref
#react useref
#react js useref
#useref hook
#react useref hook
#useref tutorial
#reactjs useref
#react js useref tutorial
#use ref react js
#learn react useref
#react dom ref
#react ref
#react useref js
#react ref hook
#react ref function
#react dom reference
#ref
00:00영상 개요(영상 속 내용과는 무관한 필기)
React의 useRef hook을 설명하는 영상에 대해 요약 및 번역에 집중한 해설노트입니다.
더욱 자세한 정보는 리액트 공식문서의 useRef 파트를 참조해보세요!
https://reactjs.org/docs/hooks-reference.html#useref
00:45영상 시작
*이름을 입력 받고 그 밑에서 입력받은 이름을 표시해주는 App 컴포넌트를 useState로 구현 해놓고 설명을 시작합니다.
01:11useState로 렌더링 횟수를 화면에 표시하는 기능을 구현해보며 useRef의 필요성을 보여준다고 합니다.
02:16useEffect가 무한 rendering을 발생시킵니다.
*effect 함수 내에서 state의 update를 유발하기 때문입니다. 그리고 state는 update 될 시에 컴포넌트의 re-rendering을 유발합니다.
02:39(위와 같은 이유로)애초에 useState로는 해당 기능을 구현하기에 적합하지 않았다고 얘기합니다.
02:47그 대신에 해결책으로 useRef hook을 얘기하기 시작합니다.
rendering 간에 값을 유지할 수 있다는 점에서 useState와 비슷하지만 re-rendering을 발생시키지 않는 점이 다르다고 합니다.
03:03useRef를 사용해서 렌더링 횟수를 화면에 표시하는 코드를 작성하기 시작합니다.
useRef에는 초기 값(숫자, 문자열, 불린, 객체, 함수-콜백형태가 아닌 호출형)이 필요하며 return하는 형태는 current property만 존재하는 object라고 합니다. current property를 통해 rendering 사이에서 값을 유지할 수 있다고 합니다.
03:57에러가 발생했습니다. useRef는 객체를 반환하는 것이지 값을 반환하는 것이 아니기 때문에 잊지말고 current를 붙여서 사용하라는 말을 전하고 있습니다.
04:08렌더링 횟수를 화면에 표시하는 기능이 완성 되었습니다.
input field의 값이 수정될 때마다 rendering 횟수가 올라가는 모습을 보여줍니다.
useRef를 사용하면 몇 번이고 값을 수정할 수 있으며 이는 컴포넌트의 re-rendering을 유발하지 않는다고 합니다. 그렇지만 컴포넌트의 render 사이에서 그 값을 유지할 수 있게 하는 점은 useState와 동일한 점이라고 합니다.
*영상 원리 이해하기(이해하셨다면 패스): renderCount가 컴포넌트의 re-rendering을 유발하지 않는다고 했는데 화면에 rendering 횟수가 계속해서 갱신되는 이유는 useState로 만든 name이 계속 update되면서 컴포넌트의 re-rendering을 유발하기 때문입니다. 'I rendered 13 times'가 화면에 표시되어 있는 시점엔 useEffect의 effect 함수로 인해 이미 renderCount는 14가 되어있는 상황이지만 값의 변화가 컴포넌트의 re-rendering을 유발하지 않기 때문에 값만 유지되고 있는 상태인 것이죠. 그런데 이 타이밍에 input field에 값이 들어오게 되면 name이 re-rendering을 유발시키면서 14인 renderCount가 UI로 표시되는 원리입니다.
04:50이제까지 useRef를 사용하는 첫 번째 사례를 설명한 것이었고 이제부터 두 번째 사용 사례를 설명한다고 합니다.
그것은 HTML element를 참조하는 기능입니다. HTML tag의 ref attribute에 useRef로 반환받은 ref 객체를 입력해주면 됩니다.
ex: <input ref={inputRef} ... />
05:10useRef로 inputRef를 만들어서 input 태그를 reference합니다.
inputRef로 input tag에 대한 접근권을 얻게 되었습니다.(HTML DOM Node)
05:36inputRef를 이용해 button을 눌렀을 때 access 하고 있는 input field로 focusing하는 기능을 구현합니다.
06:47두 번째 사용사례(dom element에 accessing)와 관련해서 useRef를 사용할 때 주의해야할 점을 이야기합니다.
HTML dom에 직접 접근해서 다루는 것이 너무 편리한 나머지 가끔씩 사람들은 react 코드로 해야할 것들마저도 ref로 처리하는 실수를 범한다고 합니다. (input field에 ref를 통해 value를 입력하는 작업을 한다던가)
React의 UI update는 state를 토대로 이뤄지는데 ref로 수동적으로 값을 바꿔버리면 state에 반영되지 않게 됩니다.(이것은 우리가 바라는게 아니죠. 우리는 일일이 수동으로 UI를 업데이트 시키는 것보다 React가 state를 기반으로 자동으로 UI를 변경해주는 것을 원하니까요)
또한 비슷한 사례로 ref를 통해 appendChild 등으로 스타일을 부여하는 경우도 있는데 우리가 React의 JSX로 편리하게 관리 할 수 있던 스타일 지정을 수동으로 하게 되는 것입니다.
유튜버는 사람들의 위 같은 실수를 실제로 많이 목격했다며, 실수를 하지 않도록 주의해야한다고 말합니다.
08:09useRef의 또 다른 용도로 state의 이전 값을 추적하기에도 유용하다고 말합니다.
08:27*영상 원리 이해하기(이해하셨다면 패스): useEffect의 effect함수는 렌더링 이후 호출됩니다. prevName.current에 들어가는 name은 이미 화면 상에 표시되고 있는 값인 것이죠. 다음 렌더링은 name이 새로운 값으로 업데이트 되는 시점이며 그때 화면에 표시되는 prevName의 값은 이전 rendering 시의 name이 될 것입니다.
09:37useRef의 유용함에 대해 다시 한 번 언급합니다.
*Dom element에 accessing 하는 것
*component가 rendering 되는 것과 상관없이 값을 유지시키는 것
*component의 rendering을 유발하지 않는 것
10:07영상 끝
✔ 학습 완료
이 학습노트가 포함된 러닝패스예요.
서원석님의 다른 노트는 어때요?
서원석
의 학습노트
리액트로 이미지 미리보기 구현(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초 만에 가입하기