state

내일배움캠프 LGLG!

6주차(주특기 숙련 - React)

리액트 State란

import { useState } from 'react';

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

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

state 사용하기

import { useState } from 'react';

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

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

State값을 직접 변경하지 말기

// 이렇게 하면 안 된다.
import { useState } = from 'react';

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

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

State를 변경하는 두 가지 방법

// 1. set State 내에 변경할 값을 넣기
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, seUser] = 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;