useEffect, useRef

hgb072082·2022년 2월 7일
0

Front-end

목록 보기
14/30

useEffect는 컴포넌트가 다 그려진 후에 실행되는 함수이다.

useEffect에는 (()=>{},[]) 형태를 가지는데 이때 {} 내부의 것들은 useEffect가 실행될 때 작동하는 것들이고 []는 의존성 배열이라고 부르며 []안의 어떠한 요소든 변경될 때, {} 내부의 내용들이 실행된다.

의존성배열 [] 을 생략하고 쓰지 않을 수도 있는데 이럴때에는 변경되는 모든 것들에 대해 실행된다.

useRef는 특정 DOM을 조작하기 위해 선택할 때 사용하는 도구이다. 기존의 JavaScript를 사용할때 우리는 getElementById, querySelector 와 같은 DOM Selector를 사용하였다.

React에서도 특정 요소의 크기를 가져와야한다던지, 스크롤바위치, 포커스설정 같은부분들에서 DOM을 직접 선택할 상황이 발생할 수 있다. 이럴때 useRef라는 Hook함수를 사용한다.

useEffect와 useRef를 함께 사용하여 자동포커스 기능을 만들어보자.

위와같이 current라는 속상을 통해 초기요소를 반환받아서 활용 할 수 있다.

profile
개발개발

0개의 댓글