[React] Syntax | 03. State와 반응성

특정 매커니즘(FSM)에서 상태를 표시할 변수가 필요할 때 state를 사용할 수 있습니다.

리액트에서 state는 useState( ) 함수를 통해 사용할 수 있습니다.

// useState를 사용하기 위해 먼저 불러와야 합니다.
import { useState } from 'react';

// useState를 호출하면, num 변수와 setNum 함수를 반환합니다.
const [num, setNum] = useState(1);

useState( )는 초기 상태값을 매개변수로 받으며, 두 가지 요소를 반환합니다.

• num : 현재 상태 값
• setNum : num의 값을 변경하는 함수

(물론, 이 두 반환값의 이름은 임의로 지을 수 있습니다)

 

아래 예시는 무작위 값을 num으로 하여 setNum()함수를 이용해 상태값을 변경하는 코드입니다.

function App() {
  const [num, setNum] = useState(1); // state를 정의합니다.

  const RandomValue = () => {
    setNum(Math.ceil(Math.random() * 10)); // 1 부터 10까지의 무작위 값을 지정합니다.
  };

  const ResetValue = () => {
    setNum(1); // 1로 초기화합니다.
  };

  return (
    <div>
      <div>
        <Button onClick={RandomValue}>Random</Button>
        <Button onClick={ResetValue}>Reset</Button>
      </div>
      <p>random value : {num}</p>
    </div>
  );
}

export default App;

State와 반응성

어떤 종류이던지 set...( ) 함수를 통해 state의 값이 바뀌면 화면은 다시 랜더링됩니다.

다르게 말하자면, 코드상 변화가 있더라도 state의 값들이 변하지 않는다면 화면은 랜더링되지 않습니다.

 

만약 array와 같은 참조형 변수를 state로 사용한다면, 내부 요소들을 수정해도 변수 자체를 가리키는 주소가 변하지 않습니다.

따라서 state 값(=array가 시작되는 주소)은 변하지 않고, 랜더링 또한 일어나지 않습니다.

function App() {
  const [num, setNum] = useState(1);
  const [history, setHistory] = useState([]);
  
  const RandomValue = () => {
    const nextNum = random(10);
    history.push(nextNum);  // 새로운 값을 history 배열에 추가합니다
    setHistory(history); // 요소만 바뀌고, 실제 history의 주소값은 변하지 않습니다
    console.log('history:', history); // history 배열을 콘솔에 출력합니다
  };
  
 // 다시 랜더링되지 않기 때문에, 출력 또한 되지 않습니다
  return (
    <div>
      <div>
        <Button onClick={RandomValue}>Random</Button>
      </div>
      <p>random value : {num}</p>
      <p>{history.join(', ')}</p>
    </div>
  );
}

export default App;

이를 해결하려면 배열 변수를 그대로 사용하지 않고, 새로운 요소를 포함하는 배열을 다시 선언해서 사용해야 합니다.

  const RandomValue = () => {
    const nextNum = random(10);
    setHistory([...history, nextNum]); // nextNum을 포함하는 새로운 배열을 선언합니다.
    console.log('history:', gameHistory); // history 배열을 콘솔에 출력합니다
  };