[React] React Hooks - useState

 

 

자료 조사를 하면서 React 16.8 이전에는 함수형 컴포넌트에서는 상태를 관리 할 수 없었다고 한다.

이 후부터는 hooks 라는 기능도입으로 인해 함수형 컴포넌트에서 상태 관리가 가능해졌다.

 

useState 불러오기

import React, {useState} from "react";

 

useState 불러와서 바뀐값을 관리 할 수 있다.

---

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

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

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

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

      return (
        <div>
          {count}
          <br />
          <button type="button" onClick={onPlustClick}>+ 1</button><button type="button" onClick={onMinusClick}>- 1</button>
        </div>
      );
    }

    export default App;
//

 

---

코드 파헤치기

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

• 기본 값을 함수의 파라미터로 넣어줌.
  • 화면에 0으로 출력. 기본값으로 " " 빈값 등으로 보통 넣어줌
• 첫번째 원소(count) : 현재 상태를 나타낸다
• 두번째 원소(setCount) : 상태를 바꾸는 함수. 현재 상태 업그레이드 함수

---

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

 

• setCount 업데이트 함수에 변화된 값을 넣어준다

---

	<div>{count}</div>

 

• 현재 값을 표시

---

중요한 포인트!

count를 늘리고 상태를 바꾸는 함수에 넣어주지 않으면 웹상 변화는 주어지는게 맞다.
하지만 화면을 리렌더링이 되지 이루어지지 않기 때문에 화면은 기존 값 그대로 보여지게 된다.
변화를 보여주고 싶다면 꼭 두번째 원소(setCount)에 새롭게 담아주기