# useReff

reasonz

1. 리액트 useRef useRef로 DOM 접근하기 useRef를 사용하면 DOM요소에 직접 접근할 수 있다. HTML 요소 태그 중 접근하고자 하는 태그의 속성에 ref를 넣어주면 된다. 보통 input 태그의 포커스를 줄 때 많이 사용된다. 클릭하지 않아도 자동으로 포커스가 생기기 때문이다. ref를 사용하면 DOM 요소에 접근할 수 있다. 인풋 태그 안에 ref 속성으로 useRef 반환 값을 담은 변수 이름을 작성해주면 된다. useEffect를 사용해서 처음 화면이 렌더링됐을 때만 인풋 태그에 포커스가 되도록 작성한 코드이다. 페이지를 새로고

reasonz

useRef 함수형 컴포넌트에서 useRef를 호출하면 ref 오브젝트를 반환해준다. 변수명.current로 접근하여 초기값을 변경할 수 있다. 반환된 ref는 렌더링 여부와 관계없이 값을 그대로 유지할 수 있다. (unmount 되기 전까지) useRef가 사용되는 유용한 순간 어떤 값을 저장할 때! state를 사용한다면 state가 변경될 때 리렌더링되면서 컴포넌트 내부 변수가 초기화 되기 때문에 변하지 않는 값이 필요하다면 ref를 사용할 수 있다. ref의 값이 변경될 때는 리렌더링이 되지 않는다. state 대신 ref를 사용하면 불필요한 렌더링을 막을 수 있고, 컴포넌트가 렌더링되어도 ref의 값이 변경되지 않고 유지된다. DOM 요소에 접근할 때! 예를 들면 input창에 focus()를 주고 싶을 때 사용할 수 있다. input을 마우스로 클릭하지 않아도 자동으로 포커스가 되어있다면 바로 키보드로 입력할 수 있는데 ref를 사용하면 이