React useState() - #Part_1

YEZI🎐·2022년 6월 21일

React State useState

React

목록 보기

10/29

Hook

Hook은 React 버전 16.8부터 React 요소로 새로 추가되었다.
Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다.
React에는 Hook 함수라고 하는 게 여러개가 있다
그 중 State Hook, 즉 useState()에 대해 알아보려 한다.

State

함수 컴포넌트에서 내부적으로 상태 관리를 해야 하는 경우 필요하다.
이를 위해서는 React에서 제공하는 Hook 함수 중 useState함수를 사용한다.

useState()란?

컴포넌트의 state(상태)를 관리 할 수 있다.
React가 state를 감시하여 사용자의 반응에 따라 렌더링한다.
useState()를 호출할 때 인자로 초기값을 넘길 수 있다.
useState()는 배열을 return하며 그 배열 안에는 두 가지 값(state, state변경함수)이 있다.
관용적으로 변수명을 state, setState로 사용한다.
- setState()는 컴포넌트의 re-rendering을 발생시킴

import에 { useState } 추가

// React에 기본적으로 내장되어 있는 useState Hook을 사용하면, state를 만들 수 있다.
import React, { useState } from 'react';

새로운 state 변수를 선언
const [state, state변경함수] = useState(기본 state값);

export default function Counter() {
	const [count, setCount] = useState(0);
	return (
		<button onClick={ () => setCount(count+1) }>Counter : {count}</button>
	);
}

State 불변성(immutable)

'변하지 않는 성질'
프로그래밍에서 불변성을 지킨다 => 메모리 영역의 값을 직접적으로 변경하지 않는다.

setState()는 setState를 실행하기 이전 상태와 변경되는 값이 다르면 컴포넌트의 re-rendering을 발생시킨다.

이때, 이전 state와 이후 state 값이 같다라고 인식하게 되는 경우는
불변성을 지키지 않고 메모리 영역의 값을 직접 변경하는 경우이며 React는 state가 바뀌었다고 인지하지 못한다.
(React는 이전 state와 이후 state를 비교할 때 얕은 비교(Shallow Compare)을 하기 때문)

원시 타입(Primitive type)

boolean
number
string

불변성을 가지고 있다.
변수에 원시 타입의 값을 할당하면, 메모리에 값 자체가 저장된다.

// 원시 타입(Primitive type)
const [show, setShow] = useState(true);
return (
	<>
		<button onClick={ () => setShow(!show) }>Show & Hide</button>
		{ show && `Counter : ${count}` }
	</>
);

참조 타입(Reference type)

Array
Object

불변성을 가지고 있지 않다.
변수에 참조 타입의 값을 할당하면, 메모리에 값이 담긴 주소가 저장된다.

참조 타입으로 받은 값을 info.show = !info.show 이런 식으로 수정하면 객체 주소를 복사하기 때문에 값의 변경을 인지 하지 못한다.
참조 타입으로 받은 값은 setState()를 이용해 spread연산자로 info를 펼친 후 변경돼야 하는 값을 수정해야 한다.

// 참조 타입(Reference type) - Object
const [info, setInfo] = useState({
	show: true
});

return (
	<>
		<button onClick={ () => {
			/* ↓ 값 변경 인지함 */
			setInfo({...info, show : !info.show});

			/* ↓ 값 변경 인지하지 못함 */
			// info.show = !info.show
			// setInfo(info.show);
		} }>Show & Hide</button>
		{ show && `Counter : ${count}` }
	</>
);

// 참조 타입(Reference type) - Array
const [array, setArray] = useState([1, 2, 3, 4]);
/* 올바른 사용법 */
setArray([...array, newItem]);
//or
setArray(array.filter(arr => {}))

/* 잘못된 사용법 */
// array[0] = 5;
// setArray(array[0]);