React - useState

react에서는 react hooks라는 기능들이 있습니다. 예를 들어 우리는 state를 사용하기 위해서 class기반의 컴포넌트를 제작해왔지만 useState라는 react hooks를 이용하여 function기반의 컴포넌트에서 state를 사용할 수 있습니다.

useState

useState는 함수형 컴포넌트에서 state를 사용할 수 있도록 해줍니다.

import React, { Fragment, useState } from 'react';

function Example()
{
  const [count, setCount] = useState(0);
}

useState는 state변수, 해당 변수를 갱신할 수 있는 함수 이 두가지를 반환합니다. 위 코드에서 count는 변수, setCount는 변수를 갱신하는 함수입니다. useState에는 인자값을 넘겨줄 수 있습니다. 여기서 넘겨준 인자가 state변수의 초기값으로 설정됩니다. 위 코드에서는 count의 기본값이 0으로 설정되어 있습니다.

Counter.js

이 useState를 이용하여 Counter를 만들어 보겠습니다.

import React, { Fragment, useState } from 'react';
import styled from 'styled-components';

const Container = styled.div`
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
`;

const CountText = styled.span`
  font-size: 24px;
`;

const ButtonContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
`;

const ClickButton = styled.button`
  width: 200px;
  height: 50px;
  background-color: #f8585b;
  border: none;
  color: white;
  font-size: 24px;
  margin: 0 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s ease-in;
  &:hover {
    background-color: #d12124;
  }
`;

export default function Counter(props) {
  const [count, setCount] = useState(0);
  // Functions
  const increment = () => {
    setCount(count + 1);
  };
  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <Fragment>
      <Container>
        <CountText>{count}</CountText>
        <ButtonContainer>
          <ClickButton onClick={increment}>+</ClickButton>
          <ClickButton onClick={decrement}>-</ClickButton>
        </ButtonContainer>
      </Container>
    </Fragment>
  );
}

완성된 코드입니다. 디자인은 styled-component를 이용했습니다. 디자인을 제외한 기능적인 부분의 코드만 보도록 하겠습니다.

const [count, setCount] = useState(0);
// Functions
const increment = () => {
  setCount(count + 1);
};
const decrement = () => {
  setCount(count - 1);
};

count 변수와 setCount함수를 useState를 이용하여 선언해줌과 동시에 변수의 기본값을 0으로 설정했습니다.
그리고 두 가지의 함수를 만들어 주었습니다. 버튼 클릭시 count의 값을 +- 1씩 해주기 위하여increment와 decrement 두 함수를 선언했습니다.

  return (
    <Fragment>
      <Container>
        <CountText>{count}</CountText>
        <ButtonContainer>
          <ClickButton onClick={increment}>+</ClickButton>
          <ClickButton onClick={decrement}>-</ClickButton>
        </ButtonContainer>
      </Container>
    </Fragment>
  );

다음으로 두 버튼의 onClick으로 위에서 만든 함수를 연결시켜주었습니다. 그리고 count를 출력시키도록 하였습니다. 여기서 주의해서 볼 부분은 class 컴포넌트에서는 this.state.count 혹은 const [count] = this.state; 와 같이 비구조화 할당을 해서 사용했지만 함수형 컴포넌트이기 때문에 사용하지 않아도 되는 편리한 점이 있습니다.

완성한 코드를 실행시키면 아래와 같이 버튼 2개와 count가 보이며 버튼 클릭시 count의 값이 변경되는 모습을 확인할 수 있습니다.