상태 관리를 할 수 있는 Hooks인 useState에 대해서 알아봅시다.

먼저, App 컴포넌트는 클래스형 컴포넌트로 작성되어있고, state가 정의되어있으며, 여러 개의 LifeCycle API가 존재합니다. 하지만 이번 장에서는 필요 없는 부분은 다 지우겠습니다. App 컴포넌트를 아래와 같이 수정해주세요.

• src/App.js

import React, { useState } from "react";
import CountButton from "./components/CountButton";
import Number from "./components/Number";
import styled from "styled-components";

const Wrapper = styled.div`
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  margin-top: 100px;
`;

const ButtonWrapper = styled.div`
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
`;

const App = () => {
  const [ number, setNumber ] = useState(0);

  return (
    <Wrapper>
      <ButtonWrapper>
        <CountButton onClick={() => setNumber(number + 1)} text="+" />
        <CountButton onClick={() => setNumber(number - 1)} text="-" />
      </ButtonWrapper>
      <Number number={number} />
    </Wrapper>
  );
}

export default App;

위의 코드에서 유심히 봐야 할 부분은 "const [ number, setNumber ] = useState(0);"입니다. 우선 useState는 상태 값과 상태 값을 변화시키는 함수를 배열 형식으로 반환하는데, 여기서는 Destructing Assignment 문법을 통해 필요한 값을 불러왔습니다. 그리고 useState의 인자는 상태 값의 초깃값에 해당합니다. 따라서 처음엔 number는 0이 되겠죠. 다음으로 CountButton 컴포넌트 부분을 살펴봅시다. onClick 이벤트 핸들러로 "() ⇒ setNumber(number + 1)"과 같은 형식으로 함수를 넘겨주었습니다. 핸들러 함수 내부에는 setNumber 함수를 통해 number의 값을 1씩 증가 또는 감소시켜줬습니다. 이와 같은 형식으로 useState를 사용합니다. Counter 프로젝트에서는 관리해야 할 상태 값이 number 밖에 없지만, 다음 페이지에서 전화번호부 프로젝트에 Hooks를 적용해보며 자세하게 어떻게 사용하는지 알아봅시다.