React Hooks (useState)여기서 나타내는 단어들은 React, Hooks, (useState)
이다 그럼 하나식 살펴 보도록하자
React
웹 사용자 인터페이스를 만들기 위해 사용된다.
Hooks
클래스 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존 방식에서 벗어나 함수형 컴포넌트에서도 더 직관적인 함수를 이용하여 작업할 수 있게 만든 기능이다.
즉, 훅을 통해 계층의 변화 없이 상태 관련 로직을 재사용할 수 있게 만들어 졌다.
상태를 설정할 때 사용하는 훅 API로 클래스 컴포넌트의 생명주기 메소드 constructor()에서 상태를 초기화하는 것과 비슷한 역할을 하는 API이다
즉, 리액트 안에서 제공하는 기능 그럼 코드로 넘어가서 살펴 보자
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 Hook을 여러 개 사용할 수도 있다.
ex)
function ExampleWithManyStates() {
// 상태 변수를 여러 개 선언!
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
// ...
}