State

state 는 “상태”라는 말로 리액트에서 화면을 그려내는 데 광장히 중요한 역할을 한다. 상태가 바뀔 때마다 화면을 새로 랜더링을 하게된다.

리액트에선 state 만들고 state 값을 바꾸기 위해서는 useState 라는 함수를 사용해야 한다.

import { useState } from 'react'

function app () {
const [num, setNum] = setState(1);

	return (
		<div>{num}</div>		
	)
}

export default app;

Destructuring 문법을 활용해 작성하는데 useState 함수가 초깃값을 아규먼트로 받고 그에 따른 실행 결과로 요소 2개를 가진 배열의 형태로 리턴하기 때문이다.

첫 번째 요소는 state 두 번째 요소는 state 를 바꾸는 함수 setter 라고 하는데, state 는 변수에 새로운 값을 할당하는 방식으로 변경하는 것이 아니라

setter 함수를 이용해서 값을 변경해야한다. 그렇게 하게 되면 상태가 변경될때마다, 화면이 리랜더링이 진행된다.

import { useState } from 'react';

function App() {
  const [num, setNum] = useState(1);

  const handleClickNumThree = () => {
    setNum(3); // num state를 3으로 변경!
  };

  const handleClickNumOne = () => {
    setNum(1); // num state를 1로 변경!
  };

  return (
    <div>
      <Button onClick={handleClickNumThree}>3으로 변경!!</Button>
      <Button onClick={handleClickNumOne}>1로 변경!!</Button>
    </div>
  );
}

export default App;

참조형 State

자바스크립트의 자료형은 크게 기본형과 참조형으로 나뉜다.

react 에서 참조형 값을 state 다룰때는 기본 state 를 변경하는 거랑은 조금 다른데

// ...

const [gameHistory, setGameHistory] = useState([]);

const handleRollClick = () => {
	const nextNum = random(6);
	gameHistory.push(nextNum);
	setGameHistory(gameHistory); // state가 제대로 변경되지 않음
}

// ...

배열 또는 객체의 값 자체를 state 가 갖고 있는게 아니라 그 배열의 주솟값을 참조하고 있기에 배열 안에 요소가 변경되어도 결과적으로 참조하는 배열의 주솟값은

변경된 것이 아니기에 state 에서는 결과값이 제대로 바뀌지 않다고 판단 그러므로 리랜더링도 진행되지 않는다.

그렇기에 참조형 state 를 활용할 때는 새로운 참조형 값을 만들어 state 를 변경해야한다.

slice … 등을 활용하면 된다.