[React] useState로 상태값 관리하기

Hooks

리액트 v16.8에 새로 도입된 기능

 

useState

함수형 컴포넌트에서도 상태 관리를 할 수 있게 해줌

 

1. 배열 비구조화 할당

배열 안에 들어있는 값을 쉽게 추출할 수 있도록 해주는 문법

const array = [1, 2];
const one = array[0];
const two = array[1];

다음 코드는 array 안에 있는 값을 one과 two에 담아주는 코드이다.

이를 배열 비구조화 할당을 사용하면

const array = [1, 2];
const [one, two] = array;

이렇게 표현할 수 있다.

 

2. useState 사용하기

import { useState } from 'react';

import 구문을 통해 불러오며 아래와 같이 사용한다.

const [value, setValue] = useState(0);

useState 함수가 호출되면 배열을 반환하는데 

배열의 첫번째 원소는 상태값,

두번째 원소는 상태를 설정하는 함수(setter)이다.

 

클래스형 컴포넌트에서의 state 초기값은 객체 형태를 넣어주어야 했는데

useState에서는 객체가 아닌 값이어도 상관 없으므로 자유롭게 값을 할당할 수 있다.

 

하나의 useState 함수는 하나의 상태값만 관리할 수 있다.

컴포넌트에서 관리해야할 상태가 여러개라면 useState를 여러번 사용하면 된다.

import {useState} from 'react';

const Info = () => {
    const [name, setName] = useState('');
    const [nickname, setNickname] = useState('');
    
    ...
    
    return (
    
    ...
    
    );
};

 

클래스형 컴포넌트에서든 함수형 컴포넌트에서든 state를 사용할 때 주의할 사항이 있다.

state 값을 바꿔야 할 때 setState 혹은 useState를 통해 전달받은 세터 함수를 사용해야 한다.

const [object, setObject] = useState({ a: 1, b: 1 });
object.b = 2;

즉, 위와 같이 state 상태 값에 직접적으로 값을 갱신하는 것은 잘못된 방식이다.

 

+) 배열이나 객체를 업데이트 해야 할 때에는 어떻게 해야 할까?

1. 배열이나 객체 상태 값 사본을 만든다.
2. 그 사본에 값을 업데이트 한다.
3. 그 사본의 상태값을 setter 함수를 통해 업데이트 한다.

const [object, setObject] = useState({ a: 1, b: 2, c: 3 });
// 1. object의 사본을 만들기
// 2. b 값만 덮어 쓰기
const copiedObject = { ...object, b: 3 };
// 3. setter 함수를 통해 상태값 업데이트
setObject(copiedObject);

ㄴ 객체의 상태값을 업데이트 해주는 예제 코드이다.

const [array, setArray] = useState([
    { id: 1, value: true },
    { id: 2, value: true },
    { id: 3, value: false },
]);
// 1. 배열의 사본 생성
// 2. 사본에 항목 추가하여 업데이트
let copiedArray = array.concat({ id: 4 });
// 2. 사본에 항목 제거하여 업데이트
copiedArray.filter(item => item.id !== 2);
// 2. 사본에 항목의 상태값 변경하여 업데이트
copiedArray.map(item => (item.id === 1 ? { ...item, value: false } : item));
// 3. setter 함수를 통해 상태값 업데이트
setArray(copiedArray);

ㄴ 배열의 상태값을 업데이트 해주는 예제 코드이다.

 

+) 배열의 정렬은 어떻게 할까?

copiedArray.sort();

문자열로 오름차순 된다.

정상적인 오름차순을 위해서는 비교함수를 매개변수로 넣어야 한다.

copiedArray.sort((a, b) => {
    if(a > b) {
    	return 1;
    } else if(a < b) {
    	return -1;
    } else {
        return 0;
    }
});

copiedArray.sort((a, b) => a-b);

두 코드는 동일한 결과로 돌아간다.

반환되는 값이 0보다 작으면 b보다 a가 앞에 온다.

 

 

출처 : 

리액트를 다루는 기술 책