useRef를 사용하는 이유

작성자 없음

2

안녕하세요 이정환입니다.

결론부터 말씀드리면 useState는 값이 변경될 경우 컴포넌트를 리렌더링 시키지만, useRef의 경우 값이 변경되어도 컴포넌트를 리렌더링 시키지 않기 때문입니다.

TodoList 구현 중에 사용되는 id 값은 단순히 새로운 아이템이 추가될 때 1씩 증가하기만 하면 될 뿐 화면에 렌더링되지 않는 값 입니다. 해당 컴포넌트 내에서 화면에 렌더링 되는 값은 todos State 뿐이죠

따라서 id 값을 State에 보관하게 되면 비효율적입니다. 화면에 실시간으로 렌더링 되지도 않을 값을 굳이 State에 보관하게 되면 이 값이 변경될 때 마다 컴포넌트가 리렌더링되어 화면을 다시 그려내야 하기 때문입니다. 반면 useRef를 통해 보관하게 되면, 값이 변경되더라도 컴포넌트를 리렌더링 시키지 않습니다.

따라서 결론적으로! useRef와 useState는 다음과 같은 기준으로 나누어 사용하시면 됩니다.

• useRef : 화면에는 나타나지 않아도 되는 값

• useState : 화면에 실시간으로 렌더링 되어야 하는 값, 변경시 컴포넌트가 리렌더링 된다.

useRef에 대해 완벽히 감이 잘 안오신다면 이전 강의(5.10 챕터)를 꼭 다시 수강하시길 권장드립니다.

1

안녕하세요, 인프런 AI 인턴입니다.
hrkim0529님, useRef를 사용하는 이유에 대해 질문해 주셨는데요, 이에 대해 도움이 될 만한 기존의 답변들을 안내해 드리겠습니다.

useRef와 useState의 차이점

useRef와 useState는 React에서 상태 및 DOM 요소를 다루기 위한 두 가지 훅입니다. 주요 차이점은 다음과 같습니다:

1. 리렌더링 여부:

   • useState: 상태가 업데이트되면 컴포넌트가 리렌더링됩니다. 따라서 화면에 상태 변화가 반영되어야 할 때 사용합니다.
     
   • useRef: 값이 변경되어도 컴포넌트가 리렌더링되지 않습니다. 따라서 상태 변화가 화면과 직접적으로 연관되지 않을 때 사용합니다.
     

2. 사용 예제:

   • useRef: 주로 현재 렌더링과 무관하게 값이 변경될 때 사용합니다. 예를 들어, DOM 접근, 비동기 작업의 상태 저장, 이전 prop 또는 state 기억.
     
   • useState: UI 갱신이 필요할 때 사용합니다. 예를 들어, 사용자 입력 값, UI 상태 등의 관리.
     

관련 질문 및 답변 링크

• dataId 를 사용하기위해 useState가 아닌 useRef를 사용하는 이유가 궁금합니다:
  이 질문은 useState 대신 useRef를 선택하는 이유에 대해 자세히 설명하고 있습니다.

• key값 할당에 대해 궁금합니다:
  useRef와 일반 변수 선언의 차이를 다루며, 렌더링 시 변수 초기화에 관한 설명을 찾아볼 수 있습니다.

질문하신 내용과 관련하여 위의 링크를 통해 이해를 돕게 되길 바랍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.