[React 리액트] Hook의 개념과 useState

 

React Hook ?

✔️ 버전 16.8에서 새롭게 등장한 개념인 Hook(훅)

✔️ React의 state와 생명주기 기능에 갈고리(hook)을 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것

✔️ React Hook의 이름은 모두 use로 시작

✔️ React Hook은 개발자가 직접 커스텀도 가능한데, 이때도 이름 앞에 use를 붙여서 훅이라는 것을 나타내는 것이 좋음

✔️ 내장 Hook 제공(useState, useEffect 등)

 

🌟 특징

• 선택적 사용

: 기존의 코드를 다시 작성할 필요 없이 일부 컴포너트 안에서 Hook 사용 가능

• 직관적인 API 제공

: props, state, context, refs, lifecycle와 같은 React 개념

 

useState

✔️ 가장 대표적이고 많이 사용되는 훅

✔️ state를 사용하기 위한 훅

 

🖥️ 사용법

const [변수명, set함수명] = useState(초깃값);

⌨️ 예시

import React, { useState } from 'react';

function Example() {
  // "count"라는 새 상태 변수를 선언합니다
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

⬆️ useState()를 사용하여 카운트 값을 state로 관리하도록 만든 것

- useState는 인자로 초기 state 값을 하나 받음

- [count, setCount] state의 변수명과 set 함수

- useState(0) count는 0부터 시작하기 때문에 초기값으로 0을 넣음

➡️ 버튼이 눌렸을 때 setCount() 함수를 호출해서 count를 1 증가시키고 count 값이 변경되면 컴포넌트가 재랜더링되면서 화면에 새로운 count 값 표시

 

📚 참고

하나의 컴포넌트 내에서 여러 State Hook 사용 가능

function ExampleWithManyStates() {
  // 상태 변수를 여러 개 선언했습니다!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}