React 18 시작하기 (4) - React state 변경하는 법

저번 시간에 블로그 게시물을 만들면서 state 사용하는 법을 알아보았는데, 이번에는 state 를 변경하는 법을 알아보겠습니다.

1. 우선, 게시물을 state로 3개 만들고, 좋아요 기능을 만들어보겠습니다. Array 자료형의 경우 index 를 이용해 배열의 요소를 사용할 수 있습니다.

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {

  let post = '강남 우동 맛집';
  let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);

  return (
    <div className="App">
      <div className="black-nav">
        <h4 style={{color: 'red', fontSize : '16px'}}>블로그임</h4>
      </div>
      <div className="list">
        <h4>{ title[0] }<span>👍</span> 0 </h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{ title[1] }</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{ title[2] }</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

export default App;

2. 그런데 좋아요 한 갯수도 자주 변경될 것 같으니, state 로 만들어주면 좋을 것 같습니다. 또한, onClick 이벤트 핸들러를 추가해줍시다. 그러나 onClick={} 안에는 함수 이름을 넣어주어야 합니다. 그런데 그냥 함수를 정의만 해주어도 됩니다. 여기서는 화살표 함수를 통해 함수를 정의하겠습니다. 정의해둔 state 변경 함수를 이용해 클릭할 때마다 좋아요 갯수를 1씩 늘리는 로직을 추가해줍니다.

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {

  let post = '강남 우동 맛집';
  let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  let [good, setGood] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4 style={{color: 'red', fontSize : '16px'}}>블로그임</h4>
      </div>
      <div className="list">
        <h4>{ title[0] }<span onClick={()=>{setGood(good+1)}}>👍</span> { good } </h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{ title[1] }</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{ title[2] }</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

export default App;

실제로, 클릭할 때마다 좋아요 갯수가 늘어나는 것을 확인할 수 있습니다. state 를 변경할 때는 state 변경 함수를 사용해야 재렌더링 역시 잘 된다고 합니다. 다음 시간에는 일반적인 state 가 아닌, array나 object state 를 변경하는 방법을 알아보도록 하겠습니다.