useRef2 useState VS useRef useState와 useRef의 차이점을 알아보고 어떤 경우에 어떤 hook 을 사용하는 것이 좋을지 확인하자. 차이점 값의 변경에 따른 렌더링 useState 상태를 변경할 때마다 컴포넌트가 리렌더링 된다. 컴포넌트의 상태를 변경하고 UI를 업데이트할 수 있다. useRef 값이 변경되어도 컴포넌트를 리렌더링 하지 않는다. 일반적으로 렌더링과 상관없는 값이나 DOM 접근에 사용된다. 사용 목적 useState 컴포넌트의 상태를 관리하고 상태의 변경에 따라 리렌더링이 필요한 경우 사용한다. 화면에 표시되는 정보 등이 해당된다. useRef 렌더링과 무관하게 특정 값에 접근할 때 사용한다. DOM 요소에 대한 참조를 생성하거나 이전 값과 현재 값을 비교 또는 setInterval의 intervalId를 저.. 2024. 1. 31. react hook - useRef useRef state와 다르게 값이 변경되어도 렌더링 되지 않는다. 컴포넌트가 렌더링 되어도 값이 유지된다. 활용 방법 저장공간으로 사용된다. DOM 요소에 접근할 수 있다. DOM 요소에 접근하는 방법 useRef를 사용하여 Ref 객체를 만든다. 접근하려는 DOM 요소에 ref 속성을 추가하여 설정한다. import React, { useEffect, useRef } from 'react' //import export default function App() { const inputRef = useRef(null); //useRef 선언 //화면이 렌더링 될 때 할 작업 useEffect(() => { inputRef.current.focus(); }, []); return ( ) } ref 객체의.. 2024. 1. 25. 이전 1 다음
