[ React ] [Chapter 8] useState

useState

 

useState는

컴포넌트에서 보여줘야 하는 데이터가 사용자 인터랙션에 따라 바뀌어야 할 때 많이 사용 된다.

---

useState 알기 전에 알아야할 Hooks

Hooks
리액트 16.8 이전 버전에서는 함수형 컴포넌트에서 상태를 관리하거나 상태를 관리 했었다.
16.8버전 이후로는 Hooks 라는 기능이 도입 되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다.
Hook는 class를 작성하지 않고도 state와 다른 리액트의 기능들을 사용할 수 있게 해준다.

Hook는 생명주기와 이벤트 핸들러와 state를 연동 시켜주는 도구이다.

이 Hooks 에서 제공하는 useState라는 함수를 사용 할거다.

 

코드 작성 예시

 

많은 예시이고 좋은 예시인 카운터를 하는 예시로 설명을 하겠습니다.
필자는 VScode로 작성 하였고, create-react-app 로 프로젝트를 설정하였습니다.먼저 카운터 할 컴포넌트를 작성합니다

import React, { useState } from 'react';

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

  const onPlus = () => {
    setCount(count + 1);
  }

  const onMinus = () => {
    setCount(count - 1);
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={onPlus}>+1</button>
      <button onClick={onMinus}>-1</button>
    </div>
  );
}

export default Counter;

import React, { useState }로  useState 쓸수 있게 리액트 패키지에서 불러옵니다.
const [count, setCount] = useState(0) 을 하는데 상태의 기본값을 파라미터로 넣어서 호출 해줍니다.
이 함수를 호출해주면 배열이 반환되는데 여기서 첫번째 요소는 현재 상태(파라미터로 넣은값으로 디폴트)
두번째 요소는 Setter 함수로 반환이 됩니다.

저렇게 작성한 이유는 배열 비구조화 할당을 통해서 요소를 추출 해준겁니다.

return 으로 JSX 랜더링 해줍니다 카운터랑 버튼 그리고 버튼 클릭이벤트까지

import React from 'react';
import Counter from './Counter';

function App() {
  return (
    <Counter />
  );
}

export default App;

그다음 App 에 당연히 랜더링 해줍니다

그럼 카운터가 아주 잘됩니다.

 

관련 글

저의 글을 읽어 주셔서 감사합니다. 오늘도 즐거운 하루 보내세요.

저의 글이 조금이나마 도움이 되셨다면 로그인이 필요 없는 공감♥ 한번 꾸욱 눌러주세요 하하~