React_Day 02 :: useRef 와 Spread에 대해서

자바스크립트를 사용할 때에는, 특정 DOM을 선택해야 하는 상황에 getElementById, querySelector같은 DOM Selector함수를 사용합니다. 리액트를 사용하는 프로젝트에서도 가끔 DOM을 직접 선택해야하는 상황이 발생하는데

이때, DOM을 선택하여 처리하는 리액트 함수 useRef를 사용하면 됩니다.

 

useRef란 ?

● 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리하는 것입니다.

useRef로 관리하는 변수는 값이 바뀐다고 컴포넌트가 리렌더링 되지 않습니다.

리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 수 있는 반면, useRef로 관리하고 있는 변수는 설정 후 바로 조회 할 수 있습니다.

 

useRef 변수를 사용하여 관리할 수 있는것

- setTimeout, setInterval을 통해 만들어진 id

- 외부 라이브러리를 사용하여 생성된 인스턴스

- scroll 위치

 

Spread란 ?

 

- 스프레드 연산자 ... 세개의 점으로 이루어진 연산자다.

 

1. 반복가능한 객체를 확장하기

 

const userlist = ['apple', 'banana', 'lagos']

console.log(...userlist);

 

2. 여러 배열을 조합하기

 

const userlist = ['apple', 'banana', 'lagos']

const userlist2 = ['prada', 'cucci' , 'adidas'];

 

const userResult = [...userlist, ...userlist2]

console.log(userResult); // ['apple', 'banana', 'lagos','prada', 'cucci' , 'adidas']

 

이 한번에 출력이 됩니다.