[백엔드 개발자의 프론트 도전기] 4. state

이전까지 한 것은 기본적으로 react에서 단순한 html 구문을 실행하는 방법이었다.

하지만 실제 react로 구성된 화면들을 보면, 상호작용에 의해 상태가 바뀌는 것을 알 수 있다.

이 상태가 바뀌는 것은 state를 통해 이루어진다.

 

- state란?

state는 컴포넌트 안에서 동적으로 변화할 수 있는 데이터를 의미한다.

예를 들어, counter를 만든다고 하면,

숫자를 증가시키거나 감소시킬 수 있어야 하는데 이때 사용되는 것이 state이다.

함수형 컴포넌트에서는 state를 useState 함수를 import하여 이용한다.

useState 함수를 호출하면, [현재 상태, 상태를 바꾸는 함수]의 배열이 반환된다.

우선, function App() 내부에 state를 정의해야 한다.

예시는 아래 참고의 한 블로그에서 Counter 만드는 예제를 가져왔다.

 

-예제

// count라는 state와 count의 setter를 동시에 정의하는 과정
  const [count, setCount] = useState(0);

위에서처럼, count를 state로 정의하고 setCount라는 함수로 값을 바꾸도록 설정하였다.

초기 세팅 값은 0으로 지정한다.

 

다음으로, 각 버튼을 눌렀을 때의 동작을 정의한다.

// up 버튼 클릭했을 때 동작하는 함수
  const onClickUpCount = () => {
    setCount(count+1);
  };

// down 버튼 클릭했을 때 동작하는 함수
  const onClickDownCount = () => {
    setCount(count-1);
  };

처음에 정의한 setCount 함수가 state를 변경할 수 있으므로, onClickUpCount()와 onClickDownCount()에서 setCount를 사용해 count의 값을 변경하도록 한다.

 

마지막으로, 화면을 정의한다.

return (
    // html이 들어감
    <div className="App">
      {count} { /*여기까지만 쓰면 count만 뜨는 상황.*/}
      <div>
        {/* up, down 버튼이 생성되고, onclick 함수가 전달된다. */}
        <button onClick={onClickUpCount}>UP</button>
        <button onClick={onClickDownCount}>DOWN</button>
      </div>
    </div>
  );

우선, 제일 상위 클래스 App 안에 count를 정의한다.

{count} : 여기까지 쓰면 실제 count 값(현재 state)만 뜨게 된다.

아래 button 두 개를 만들어 onClick에 각각 아까 만든 onClickUpCount()와 onClickDownCount()를 연결했다.

그럼 각각의 버튼을 눌렀을 때, 각 함수에서 정의한 것처럼 state를 변경시키는 상황이 발생한다.

 

전체 코드를 보면 다음과 같다.

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

function App() {
  // count라는 state와 count의 setter를 동시에 정의하는 과정
  const [count, setCount] = useState(0);

  // up 버튼 클릭했을 때 동작하는 함수
  const onClickUpCount = () => {
    setCount(count+1);
  };

  // down 버튼 클릭했을 때 동작하는 함수
  const onClickDownCount = () => {
    setCount(count-1);
  };

  return (
    // html이 들어감
    <div className="App">
      {count} { /*여기까지만 쓰면 count만 뜨는 상황.*/}
      <div>
        {/* up, down 버튼이 생성되고, onclick 함수가 전달된다. */}
        <button onClick={onClickUpCount}>UP</button>
        <button onClick={onClickDownCount}>DOWN</button>
      </div>
    </div>
  );
}

export default App;

 

이에 대한 화면은 다음과 같다.

UP을 세 번 누른 결과

 

참고 : 

👊리액트 부시기 : 리액트 초보 탈출하기 (velog.io)

[React] 클래스형 컴포넌트와 함수형 컴포넌트의 차이 — Koras02코딩웹 (tistory.com)