- 신가이드 : https://react.dev/learn/referencing-values-with-refs
Summary
🔑 리액트 컴포넌트에서 정보를 “기억”하되 해당 정보가 새로운 렌더링을 트리거하지 않도록 하려면 ref를 사용할 수 있습니다. ref는 컴포넌트 외부와 통신하거나 브라우저 API와 상호작용하는 경우에 유용하며, 렌더링과 무관한 값을 보유하기 위해 사용됩니다.
ref의 변경은 리렌더링을 일으키지 않기에, ref를 렌더링에는 사용하지 않는 것이 좋음.
Facts
- 🔑 ref를 컴포넌트에 추가하는 방법:
useRef훅을 React에서 가져와 컴포넌트 내에서 호출합니다.- 초기값을
useRef에 전달하여 참조하려는 초기 값을 설정합니다. useRef는{ current: 초기값 }형태의 객체를 반환합니다.- 🔑 ref의 값을 변경하는 방법:
ref.current속성을 통해 현재 값을 읽고 쓸 수 있습니다.이 값을 변경하여 컴포넌트 외부에서 컴포넌트 내부로 데이터를 전달할 수 있습니다.
- 🔑 ref와 상태(state)의 차이점:
- ref는 렌더링시 다시 렌더링을 트리거하지 않지만, 상태는 변경시 컴포넌트를 다시 렌더링합니다.
ref는 렌더링 도중에 현재 값을 읽거나 쓰지 않는 것이 좋습니다. 상태는 언제든 읽을 수 있습니다.
- 🔑 ref와 DOM:
- ref는 임의의 값을 가리킬 수 있으며, DOM 엘리먼트에 접근하는 가장 일반적인 용도입니다.
ref를 JSX의 ref 속성에 전달하면 해당 DOM 엘리먼트가
ref.current에 저장됩니다.- 🔑 ref 사용 시 주의사항:
- 렌더링 도중에
ref.current를 읽거나 쓰지 마십시오. 이는 컴포넌트 동작을 예측하기 어렵게 만듭니다. ref와 상태(state)의 제한 사항은 다릅니다. ref의 현재 값을 변경하면 즉시 변경됩니다.
- 🔑 ref의 최상의 사용 사례:
- 컴포넌트가 외부 시스템이나 브라우저 API와 통신해야 하는 경우에 사용됩니다.
렌더링 로직에 영향을 주지 않는 값을 저장해야 할 때 ref를 선택합니다.
- 🔑 리액트 내부에서
useRef가 작동하는 방법: useState와useRef는 모두 React에서 제공되며, 원칙적으로useRef는useState위에 구현될 수 있습니다.첫 번째 렌더링 중에
useRef는{ current: 초기값 }를 반환하며, 다음 렌더링에서는 동일한 객체가 반환됩니다.- 🔑 refs 사용 시 최상의 관례:
- refs를 탈출구로 사용해야 합니다. ref에 많이 의존하는 경우 접근 방식을 재검토해야 합니다.
- 렌더링 도중에
ref.current를 읽거나 쓰지 마십시오. 이로 인해 컴포넌트의 동작이 예측하기 어려워집니다.