React - useState, Hooks 기초

 

React QuickStart

Quick Start – React

Updating the screen

• 컴포넌트가 특정 정보를 기억하고, 이를 보여주는 기능이 필요할 때 사용합니다.
• ex) 버튼이 클릭된 횟수를 세는 경우가 있죠
• 이 때, 아래 코드를 사용하면 특정 값의 변화에 따라 컴포넌트가 변화하는 것을 확인할 수 있습니다.
• 여기서 반드시 setCount(또는 본인이 설정한 함수)로 count(state)를 변경해주어야 합니다.

import { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

 

Using Hooks

use로 시작하는 함수를 Hooks라고 부릅니다.

useState또한 React에서 제공하는 built in Hook중 하나입니다.

• 이미 있는 Hook들로부터 customize한 Hook을 작성할 수 있습니다.
• 다른 함수들보다 제한적입니다.
  • component의 상단에서만 작성할 수 있습니다.
  • useState를 조건이나, 반복절에 사용하고 싶으면 새로운 component로 빼서 거기다가 넣어줘야합니다.
• 데이터 공유하기
  • 상단의 component에서 useState를 사용합니다.
  • 기존 MyButton에 있던 useState를 상단 MyApp으로 뺐습니다.
  • 그리고 관련 변수와 함수를 MyApp에서 MyButton에 넘겨주는 방식으로 구현되었습니다.

import { useState } from 'react';

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}