[React] React useState

<개요>

컴포넌트에서 보여줘야 하는 데이터가 변경될 때 useState를 통해 바로 나타내 줄 수 있다.

React 16.8에서 Hooks라는 기능이 생기면서 함수형 컴포넌트에서도 상태관리가 가능해졌다.

---

<적용방법>

1. useState를 사용하기위에 임포트해준다.

2. useState를 이용해 사용할 값을 초기화해준다.

3. 데이터 값을 변경할때는 setCount 를 사용하고 나타낼 때에는 count 를 사용한다.

import React, { useState, useEffect } from "react";

const SamplePage = () => {

  // useState
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");
  const [list, setList] = useState([]);

  useEffect(() => {
   changeData();
  }, []);


  // 데이터 변경
  const changeData = () => {
    setCount(10);
  };

  // render
  return (
    <div>
      // Component
      <div>{count}</div>
    </div>
  );
};
export default SamplePage;

---

<참고>

https://ko.reactjs.org/docs/hooks-state.html

Using the State Hook – React

https://react.vlpt.us/basic/07-useState.html

7. useState 를 통해 컴포넌트에서 바뀌는 값 관리하기 · GitBook