[React] #4 state

state는 컴포넌트 내부에서 바뀔 수 있는 값으로, state가 수정 됐을 때 페이지를 다시 그리지 않아도 UI 업데이트가 가능하기 때문에 SPA의 핵심 요소라고 할 수 있다. 리액트에는 클래스형 컴포넌트가 지니고 있는 state와 함수형 컴포넌트에서 useState라는 함수를 통해 사용되는 state 두 가지 종류가 있다. useState 함수는 함수형 컴포넌트에서도 상태 관리를 할 수 있도록 리액트 16.8에서 도입된 Hooks 기능 중 하나다. 함수의 인자에는 상태의 초깃값을 넣어준다. 값의 형태는 숫자, 문자열, 객체, 배열 등 자유롭다. 함수를 호출하면 배열이 반환되는데, 이때 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꿔주는 세터(Setter) 함수이다. state 값을 바꿔야 할 때는 setState 혹은 useState를 통해 전달받은 세터 함수를 사용해야 한다.

 

☝🏻 배열 비구조화 할당

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

import React, { useState } from "react";

const Hello = () => {
	const [message, setMessage] = useState("");
	const [color, setColor] = useState("black");
	const onClickEnter = () => {
		setMessage("안녕하세요!");
	};
	const onClickLeave = () => {
		setMessage("안녕히가세요!");
	};
	return (
		<div>
			<button onClick={onClickEnter}>입장</button>
			<button onClick={onClickLeave}>퇴장</button>
			<h1 style={{ color }}>{message}</h1>
			<button style={{ color: "red" }} onClick={() => setColor("red")}>
				red
			</button>
			<button style={{ color: "green" }} onClick={() => setColor("green")}>
				green
			</button>
			<button style={{ color: "blue" }} onClick={() => setColor("blue")}>
				blue
			</button>
		</div>
	);
};
export default Hello;

만약 배열이나 객체를 업데이트해야 할 때는 배열, 객체 사본을 만들고 그 사본에 값을 업데이트 한 후, 그 사본의 상태를 setState 혹은 세터 함수를 통해 업데이트한다. 객체에 대한 사본을 만들 때는 spread 연산자를 사용하여 처리하고, 배열에 대한 사본을 만들 때는 배열의 내장 함수들을 활용한다.

 

☝🏻 spread 연산자

spread 연산자는 ... 을 통해 사용할 수 있다. spread 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체를 개별 요소로 분리할 수 있다. spread 연산자를 통해서 배열을 찍으면 배열이 아닌 개별적인 요소가 나오는 것을 볼 수 있다.

const arr = [1, 2, 3, 4, 5];

console.log(arr);   // [ 1, 2, 3, 4, 5 ]
console.log(...arr);   // 1, 2, 3, 4, 5

 

객체 사본 만들기

const object = { a: 1, b: 2, c: 3 };
const nextObject = { ...object, b: 2 }; // 사본을 만들어서 b 값만 덮어 쓰기

배열 사본 만들기

const array = [
	{ id: 1, value: true },
	{ id: 2, value: true },
	{ id: 3, value: false }
];
let nextArray = array.concat({ id: 4 });   // 새 항목 추가
nextArray.filter(item => item.id != = 2);   // id가 2인 항목 제거
nextArray.map(item => (item.id === 1 ? { ...item, value: false } : item));   // id가 1인 항목의 value를 false로 설정

 

props와 state 둘 다 컴포넌트에서 사용하거나 렌더링할 데이터를 담고 있어 비슷해 보일 수 있지만, props는 부모 컴포넌트가 설정하는 값이고 state는 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 업데이트 할 수 있다.

 

 

 

참고 자료 : https://thebook.io/080203/, https://react.vlpt.us