[리액트 React] state / setSate / 참조형 state / 스테이트

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 리액트에서 꼭 알아야되는 state에 대해 다뤄보겠습니다.

지금부터는 가독성을 위해 문어체를 사용할게요!

 

 

  State

• state : 상태
• 상태가 바뀔 때마다 화면을 새롭게 그려내는 방식으로 동작한다.
• 리액트에서 state를 만들고, state를 바꾸기 위해서는 'useState'라는 함수를 사용한다.
• Destructuring 문법으로 작성한다.

import { useState } from 'react';

// ...

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

// ...

• useState 함수가 초깃값을 아규먼트로 받고, 그에 따른 실행결과로 요소 2개를 가진 배열 형태로 리턴하기 때문에 위에 보이는 코드처럼 사용한다.
• 첫 번째 요소가 state이고, 두번째 요소거 state를 변경하는 setter함수이다.
• state는 변수에 새로운 값을 할당하는 방식으로 변경하지 않고, setter함수를 활용한다.
• setter 함수는 호출할 때 전달하는 아규먼트 값으로 state 값을 변경해준다.

 

 

 

 

  state 예시

• setter 함수를 활용하여 이벤트핸들러를 등록한다.
• 이벤트가 발생할 때마다 상태가 변하며, 그때마다 화면도 새롭게 렌더링 된다.

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

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

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

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

  return (
    <div>
      <Button onClick={handleRollClick}>시작</Button>
      <Button onClick={handleClearClick}>처음부터</Button>
      <Tooktak color="red" num={num} />
    </div>
  );
}

export default App;

 

 

 

 

 

  참초형 State

• 자바스크립트의 자료형에는 기본형과 참조형으로 나눌 수 있다.
• 참조형은 특성상 변수로 다룰 때 주의해야할 부분이 있는데, state를 활용할 때도 같다.
• ushift나 push 메소드로 배열 안에 요소를 변경했다고 하더라도, 리액트 입장에서는 state가 참조하는 주솟값이 여전히 똑같기 때문에 state가 바뀌었다고 생각하지 않는다.
• 참조형 state를 사용할 때는 반드시 새로운 참조형 값을 만들어서 state를 변경하도록 한다.
  (가장 간단한 방법은 Spread 문법 '...' 사용)

// ... 

  const [tooktak, setTooktak] = useState([]);

  const handleRollClick = () => {
    setTooktak([...tooktak, setTooktak]);
  };

// ...