[React] 리액트 입문하기

공식문서 참고함.

Hook 사용하기

간단히 말해 use- 로 시작하는 메서드들을 Hook이라고 칭한다.

Hook은 다른 함수보다 더 제한적으로 컴포넌트(또는 다른 Hook)의 상단에서만 Hook을 호출할 수 있기 때문에 조건문/반복문에서 사용하고 싶다면 새 컴포넌트를 추출하여 사용해야 한다.

가장 대표적인 훅으로 useState() 가 있다.

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>
  );
}

이 때 이렇게 전달한 정보를 props라고 한다.

즉, 지금까지 한 내용을 간단히 요약해보자면 이렇다.

함수형 컴포넌트 MyButton에 대해서, useState란 Hook을 통해서 count란 props를 공유된 클릭 헨들러를 통해 전달한다.