#25 [9장_1] useRef의 사용법과 그 원리에 대해 2가지를 말해주세요~!

[hyeyoonS]

❓문제

• useRef의 사용법과 그 원리에 대해 2가지를 말해주세요~!

🎯답변

1. DOM을 직접 선택해야 하는 경우

[원리] useRef는 current 단일 프로퍼티를 가진 객체(보통 ref로 선언함)를 반환합니다. 이 때 ref 객체를 JSX 노드의 ref 어트리뷰트로 전달하면 리액트에서 ref.current에 해당 DOM 노드가 설정됩니다.

2. 컴포넌트의 리렌더링을 일으키지 않는 상태 값을 만들고 싶을 때

[원리] useRef는 useState 처럼 처음 렌더링에만 유효한 initialValue를 전달할 수 있습니다. initialValue는 ref.current에 저장됩니다. ref.current는 다른 값으로 바꿀 수 있으며 1번 케이스의 경우 ref.current는 DOM 노드로 바뀔 것입니다. 하지만 DOM을 이용하지 않고 ref.current를 상태로 활용할 수 있습니다. 컴포넌트의 리렌더링 시 일반 JS 변수와 다르게 값이 유지되기 때문입니다. 대신 useState 상태와 다른 점은 ref.current 상태는 조작을 통해 값이 변경되어도 리렌더링을 유발하지 않습니다. 따라서 useRef를 컴포넌트가 리렌더링 되더라도 일반 JS 변수와 다르게 상태를 유지하면서, 대신 값이 변한다 하더라도 리렌더링을 유발할 필요가 없는 경우에 사용할 수 있습니다.

[예제]

[drizzle96]

1. DOM을 직접 선택해야 하는 경우

[원리] useRef는 current 단일 프로퍼티를 가진 객체(보통 ref로 선언함)를 반환합니다. 이 때 ref 객체를 JSX 노드의 ref 어트리뷰트로 전달하면 리액트에서 ref.current에 해당 DOM 노드가 설정됩니다.

2. 컴포넌트의 리렌더링을 일으키지 않는 상태 값을 만들고 싶을 때

[원리] useRef는 useState 처럼 처음 렌더링에만 유효한 initialValue를 전달할 수 있습니다. initialValue는 ref.current에 저장됩니다. ref.current는 다른 값으로 바꿀 수 있으며 1번 케이스의 경우 ref.current는 DOM 노드로 바뀔 것입니다. 하지만 DOM을 이용하지 않고 ref.current를 상태로 활용할 수 있습니다. 컴포넌트의 리렌더링 시 일반 JS 변수와 다르게 값이 유지되기 때문입니다. 대신 useState 상태와 다른 점은 ref.current 상태는 조작을 통해 값이 변경되어도 리렌더링을 유발하지 않습니다. 따라서 useRef를 컴포넌트가 리렌더링 되더라도 일반 JS 변수와 다르게 상태를 유지하면서, 대신 값이 변한다 하더라도 리렌더링을 유발할 필요가 없는 경우에 사용할 수 있습니다.

[예제]

[hyeyoonS]

useRef의 사용법

(1) DOM요소를 직접 선택해야 하는 경우

• 요소에 포커스 설정, 특정 컴포넌트의 위치로 스크롤…
• 컴포넌트가 렌더링될 때 ref 를 사용하여 DOM 요소를 참조하고, 필요한 경우에 그 DOM 요소를 직접 조작하거나 속성을 읽을 수 있다

(2) 자식 컴포넌트를 저장하는 변수

(3) 상태가 변경되더라도 리렌더링을 하지 않는 경우

⇒useRef로 관리되는 변수는 값이 바뀌어도 컴포넌트의 리렌더링이 발생하지 않는다.

(4) 값을 설정한 후 즉시 조회가 필요할 때

⇒리액트 컴포넌트의 상태는 상태 변경 함수를 호출하고 렌더링이 된 이후에 업데이트 상태를 조회할 수 있는 반면, useRef로 관리되는 변수는 값 설정 후 즉시 조회가 可

useRef의 원리.........?

이게뭐지....?