[React] 리액트 State란?

🎯 리액트 State란?

import { useState } from 'react';

function Example() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>버튼을 {count}번 눌렀습니다.</p>
            <button onClick={() => setCount(count + 1)}>클릭</button>
        </div>
    );
}

• State는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용한다.
• 개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있다.
• State 값이 변경되고 재 렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분을 렌더링 한다.

 

📝 state 사용하기

import { useState } from "react";

const App = () => {
    const [value, setValue] = useState(초기값);
    return ...
}

• State의 값을 변경하기 위해서는 반드시 setState 함수를 이용한다,
• state 값을 임의로 변경해선 안 된다.

 

📝 State 값을 직접 변경하지 말기!

import { useState } from 'react';

function Example() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>버튼을 {count}번 눌렀습니다.</p>
            <button onClick={() => {count = count + 1;}>클릭</button> // 이렇게 하면 안 된다.
        </div>
    );
}

• State 값을 직접 변경하게 되면 React가 Component를 다시 렌더링 할 타이밍을 알아차리지 못한다.
• 반드시 setState 함수를 이용해 값을 변경!!!!!
• setState 함수를 호출할 때 React에게 “다시 렌더링 해주세요!!!”라는 명령을 내린다.

 

📝 State를 변경하는 두 가지 방법

// 1. setState 내에 변경할 값을 넣기
const [count, setCount] = useState(0);
setCount(count + 1);

// 2. setState에 함수를 넣기
const [count, setCount] = useState(0);

setCount((current) => {
    return current + 1
})

• setState 함수에는 변경할 값을 직접 넣는 방법과 함수를 넣는 방법이 있다.
• 함수를 넣는 경우 함수가 반환(return)하는 값으로 State가 변경된다.
• 현재 값을 기반으로 State를 변경하고자 하는 경우 함수를 넣는 방법을 권장

 

📝 Object, Array를 갖는 State를 만들 때 주의사항

const [user, setUser] = useState({name: "민수", grade: 1})

setUser((current) => {
    current.grade = 2; // 이렇게 하면 안 된다.
    return current;
})

• Object를 값으로 갖는 State도 만들 수 있다.
• 그러나 예시의 경우 React가 State의 변경을 감지하지 못한다!
• user object 안의 grade가 변경되었지만 user 자체는 변경되지 않았기 때문이다.

 

📕 안 좋은 예

const [user, setUser] = useState({name: "민수", grade: 1})

setUser((current) => {
    current.grade = 2;
    return current;
})

• user의 grade가 변경되었지만 user의 내용을 담는 object 자체가 변경된 것은 아니다.

 

📕 올바른 예

const [user, setUser] = useState({name: '민수', grade: 1 })

setUser((current) => {
    const newUser = { ...current }
    newUser.grade = 2
    return newUser
})

• 기존 user의 내용을 새로운 object에 담고 grade를 변경한다.

import React, { useState } from 'react';

function App() {
  const [person, setPerson] = useState({
    name: "김민수",
    count: 0
  });  

  return (
    <div className="App">
        <button onClick={() => {
            setPerson((current) => {
                const newPerson = { ...current };
                newPerson.count = newPerson.count + 1;
                return newPerson;
            })
        }}>클릭</button>
        <span>{person.name}님이 버튼을 {person.count}회 클릭하였습니다.</span>
    </div>
  );
}

export default App;