useRef 의 기본형태
const ref = useRef(value);
useRef 는 기본적으로 current 값을 가지며 { current: value}의 형태를 가지고있다!
value값은 언제든지 변경해줄수 있다 !
useRef를 언제 사용할까?
1. 저장공간이 필요할때
- State의 값이 변화하면 => 렌더링 될 때 => 컴포넌트내부 변수들 초기화 된다
- 기본적으로 함수값이 변하면 리렌더링 된다! 함수값을 변화시키되 렌더링을 시켜주고 싶지 않을 때 사용한다!
- Ref의 값이 변화하면 => no렌더링 = 변수들의 값 유지!
- 하나더 ! State값이 변화하면 =>렌더링=> 그래도 Ref의 값은 유지된다!! 뽀인트
2. Ref를 통해 DOM요소에 접근하고 싶다!
- 로그인 화면이 보여졌을때 클릭하지 않아도 입력이 될수 있게 FOCUS기능을 사용하고 싶을때!!
예제 코드로 알아보자!
- 1번째 예제로 알아보는 State와 Ref의 차이점!
실행화면!
위에서 설명한대로 state값은 변경 될 때마다 리렌더링 되지만 Ref는 별도의 렌더링을 진행하지 않는다!
위의 사진을 보고 세 가지를 알수 있다.
- State의 변화가 생기면 => 렌더링 실행=> 컴포넌트 내부 변수들은 모두 초기화
- Ref의 변화가 생기면 => 렌더링 NO => 변수 값 유지
- State의 변화시 => 렌더링 실행 => 그래도 Ref의 값 유지!
- 2번째 예제로 알아보는 변수와 Ref의 차이점!
실행화면!
- 자! 위의 자료를 정리해보자!
- Ref는 역시 바로 렌더링 되지 않기떄문에 렌더링함수를 호출시켜줘야 값이 변경된다!
- 그렇다면 변수는? State와 다르게 변수의 값이 변해도 렌더링을 시켜주지 않기 때문에 렌더링 함수를 호출하기 전까진 화면에 출력되는 값을 변화시켜주지 않는다!
- 그렇다면 렌더링 함수를 호출 시켜도 변수의 값이 0 으로 출력되는 이유는 무엇일까?
- 실제 변수 올려! 버튼을 누르면 변수의 값이 실제로 증가되는 것은 맞다 하지만 왜 화면의 값은 변하지 않는다.
- 바로 변수는 렌더링 함수가 호출되는 즉시 값이 초기화 되기 때문이다!!
정리하자면 State는 그 값이 변할때 리렌더링을 시켜주며 변수가 초기화되지않는다.
ref는 값이 변할때 리렌더링을 시켜주지는 않지만 렌더링시 값이 초기화 되지않는다!
마지막으로 변수는 값이 변해도 렌더링을 시켜주지않고 리렌더링 되는 순간 값이 초기화 된다!!
2_2예제!
렌더링의 수를 알아보자!
결과!
- 새로고침을 눌렀을때 첫 렌더링이 실행되기때문에 기본값은 1로 나온다!
- 자 그렇다면 useState를 사용하지않고 useRef를 사용해서 렌더링된 수를 알아보는 이유는 뭘까?
- 바로! useEffect는 마운트 될때! 언마운트 될때! 리렌더링 될때! 호출되며 그 안의 State값이 바꾸면 자동으로 리렌더링 되기때문에 무한 호출 굴레에 빠지게된다!
- 또 따로 태그에 함수를 지정해주지 않아도! 올려와 렌더링 버튼은 State값을 변경시켜주는 함수를 가지고 있으므로 두버튼이 눌렸을때 리렌더링되고 자동적으로 렌더링 수가 올라가는것이다!!
- 마지막 예제! ref를 실제 적용해보자!
실행결과!
본 페이지는 유튜브 별코딩님의 영상을 참고 하였습니다.
728x90
'REACT' 카테고리의 다른 글
| React Hooks 5.useMemo (0) | 2022.11.21 |
|---|---|
| React Hooks 4.useContext (0) | 2022.11.20 |
| React Hooks 2.useEffect (0) | 2022.11.17 |
| React Hooks 1.useState (0) | 2022.11.17 |
| 1장! React Hooks의 종류! (0) | 2022.11.17 |