React Hooks (useState)

React Hooks (useState)여기서 나타내는 단어들은 React, Hooks, (useState)

이다 그럼 하나식 살펴 보도록하자

React

웹 사용자 인터페이스를 만들기 위해 사용된다.

Hooks

클래스 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존 방식에서 벗어나 함수형 컴포넌트에서도 더 직관적인 함수를 이용하여 작업할 수 있게 만든 기능이다.
즉, 훅을 통해 계층의 변화 없이 상태 관련 로직을 재사용할 수 있게 만들어 졌다.

useState 란?

상태를 설정할 때 사용하는 훅 API로 클래스 컴포넌트의 생명주기 메소드 constructor()에서 상태를 초기화하는 것과 비슷한 역할을 하는 API이다

즉, 리액트 안에서 제공하는 기능 그럼 코드로 넘어가서 살펴 보자

Code

ex) 버튼을 클릭하면 값이 증가하는 간단한 카운터 예시가 있습니다.

1. import React, { useState } from 'react';

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

5.  return (
6.    <div>
7.     <p>You clicked {count} times</p>
8.      <button onClick={() => setCount(count + 1)}>
9.        Click me
10.      </button>
11.    </div>
12.  );
13.}

여기서 useState = Hook 이다(이게 무슨 뜻이냐~). Hook을 호출해 함수 컴포넌트(function component) 안에 state를 추가했다는 뜻.

위 1. 에서 { useState }를 import했다.

그리고 4. 에 const, setCount를 useState(0); 에 선언하고

7.은 {const} 8.은 setCount를 넣어 결과값을 만들어냈다.

여러 state 변수 선언하기

하나의 컴포넌트 내에서 State Hook을 여러 개 사용할 수도 있다.

ex)

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

리액트 훅 사용 규칙

1. 훅은 최상위 레벨에서만 호출 가능합니다.
   다시 말해 반복문, 조건문, 중첩된 함수 내부에서 호출하면 안 됩니다.
2. 훅은 오직 리액트 함수 컴포넌트 내에서만 호출 가능합니다.