[React] State(스테이트)

State

: 리액트에서 화면을 그려내는 데 굉장히 중요한 역할을 함.  상태가 바뀔 때마다 화면을 새롭게 그려내는 방식으로 동작을 하는 것. 

 

state 사용법 

 

1. useState 함수 활용하기

import { userState } from 'react'; 
//...
const [num, setNum] = useState(1); 
//...

destructing 문법으로 작성. useState 함수가 초기값을 아규먼트로 받고 그에 따른 실행 결과로  요소 2개를 가진 배열의 형태로 리턴하기 때문. 첫 번째 요소(num)가 state고, 두 번째 요소(setNum)가 state를 바꾸는 setter함수. 보통 첫 번째 변수는 state의 이름을 지어주고, 두 번째 변수는 state이름 앞에 set을 붙인 다음에 카멜케이스로 이름을 지어주는 것이 일반적. 

 

state 변수에는 새로운 값을 할당하는 방식으로 변경하는 것이 아니라 이 setter 함수를 활용해야함. 

setter 함수는 호출할 때 전달하는 아규먼트 값으로 state값을 변경해준다. 

import { useState } from 'react';
import Button from './Button';
import Dice from './Dice';

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

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

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

  return (
    <div>
      <Button onClick={handleRollClick}>던지기</Button>
      <Button onClick={handleClearClick}>처음부터</Button>
      <Dice color="red" num={num} />
    </div>
  );
}

export default App;

setter 함수를 활용해서 이벤트 핸들러를 등록해두면, 이벤트 발생할 때 마다 상태가 변화하면서 새로운 화면이 나타나는 것. 

 

참조형State

// ... 

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

  const handleRollClick = () => {
    const nextNum = random(6);
    gameHistory.push(nextNum);
    setGameHistory(gameHistory); 
  };

// ...

배열값을 가진 gameHistory에 push 메서드를 이용해서 배열의 값을 변경한 다음, 

변경된 배열을 setter함수로 state를 변경하려고 하면 코드가 제대로 작동하지 않음. 

gameHistory state는 배열 값 자체를 가지고 있는 것이 아니라 배열의 주소값을 참조하고 있기 때문에 push로 배열 안에 요소를 추가했다고 하더라도 결과적으로 참조하는 배열의 주소값이 변경된 것은 아님. 즉, state가 바뀐 것이 아님. 

따라서 리액트에서는 참조형 state를 활용할 때 반드시 새로운 참조형 값을 만들어야 함! 

// ... 

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

  const handleRollClick = () => {
    const nextNum = random(6);
    setGameHistory([...gameHistory, nextNum]); // state가 제대로 변경된다!
  };

// ...

이렇게 해야지 참조형 값이 바뀔 수 있음. 

 

리액트 렌더링 방식: Virtual DOM 

state가 바뀔 때, virtual dom (가상 DOM) 을 활용해서 버추얼 돔에 먼저 렌더링 함. 실제로는 아직 반영하지 않은 것 

변경전 virtual dom과 변경 후 virtual dom를 비교해서 바뀐 부분만 반영 

장점: 

1. 단순하고 깔끔한 코드 작성 가능.

2. 변경사항 리액트가 적당히 모아서 처리 가능 -> 변경사항 효율적으로 처리 가능.