[React] useState, useRef 함수 알아보기

1) useState 함수

- 컴퍼넌트에서 동적인 값의 상태(state)를 다루는 hook 함수를 뜻한다.

 

const [현재상태변수, 설정함수] = useState(초기값);

▼

const [number, setNumber] = useState(0);

 

✔ hook 함수

- 상태 관리를 다루던 클래스를 좀 더 쉽게 다룰 수 있도록 만들어진 함수들을 말한다.

 

 

2) spread 란?

- 객체 또는 배열을 펼처 저장하는 방법을 뜻한다.

 

const dog = {
   name: '코비'
};

▼ 하단의 ...이 spread 방법이며, 위의 값을 밑의 ...방법을 이용하여 복사 붙여넣기 한다는 뜻

const cuteDog = {
	...dog,
    age: 10
}

▼ spread 방법을 또 써보았다.

const blackCuteDog = {
	...cuteDog,
    color: 'black'
}

 

결과값은?

const dog = {
    name: '코비'
 }

 const cuteDog = {
	...dog,
    age: 10
}

const blackCuteDog = {
	...cuteDog,
    color: 'black'
}

console.log(dog);
console.log(cuteDog);
console.log(blackCuteDog);

const class1 = ['김사과','오렌지','반하나'];
const class2 = [...class1, '이메론', '안카도'];
console.log(class1);
console.log(class2);

 

 

🎀 리액트 상태에서 객체 수정하기 🎀

 

setUsers({
	...users,
	[name]: value
});

- 리액트에서는 상태값의 불변성을 지켜줘야한다.

- 리액트 컴퍼넌트에서 상태가 업데이트 되었음을 감지할 수 있다.

 

✔ 리액트에서 객체를 업데이트 할 때는 기본 객체를 직접 수정하면 안되고,

새로운 객체를 만들어서 새 객체에 변화를 줘야한다.

 

 

3) useRef 함수

- 특정 엘리먼트에 접근하거나 스크롤바 위치를 설정할 때 사용한다.

- 외부 라이브러리를 사용할 때 사용한다.

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

 

useRef( ) 객체를 생성 -> 가상 DOM에 ref 값을 설정한다.
current : 가상 DOM을 가리킨다.