Hook이란?Hook은 특별한 함수입니다. 예를 들어useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다. 다른 Hook들은 나중에 살펴봅시다!
언제 Hook을 사용할까?함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 클래스 컴포넌트로 바꾸곤 했을 겁니다. 하지만 이제 함수 컴포넌트 안에서 Hook을 이용하여 state를 사용할 수 있습니다.
state 변수 선언하기
클래스를 사용할 때, constructor 안에서this.state를{ count: 0 }로 설정함으로써count를0으로 초기화했습니다.
함수 컴포넌트는this를 가질 수 없기 때문에this.state를 할당하거나 읽을 수 없습니다. 대신,useStateHook을 직접 컴포넌트에 호출합니다.
useState를 호출하는 것은 무엇을 하는 걸까요?“state 변수”를 선언할 수 있습니다. 위에 선언한 변수는count라고 부르지만banana처럼 아무 이름으로 지어도 됩니다.useState는 클래스 컴포넌트의this.state가 제공하는 기능과 똑같습니다. 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않습니다.
useState의 인자로 무엇을 넘겨주어야 할까요?useState()Hook의 인자로 넘겨주는 값은 state의 초기 값. 함수 컴포넌트의 state는 클래스와 달리 객체일 필요는 없고, 숫자 타입과 문자 타입을 가질 수 있습니다. 위의 예시는 사용자가 버튼을 얼마나 많이 클릭했는지 알기를 원하므로0을 해당 state의 초기 값으로 선언했습니다. (2개의 다른 변수를 저장하기를 원한다면useState()를 두 번 호출해야 합니다.)
useState는 무엇을 반환할까요?state 변수, 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환합니다. 이것이 바로const [count, setCount] = useState()라고 쓰는 이유입니다. 클래스 컴포넌트의this.state.count와this.setState와 유사합니다.
이제useState를 이용하여 많은 것을 만들 수 있습니다.
count라고 부르는 state 변수를 선언하고0으로 초기화합니다. React는 해당 변수를 리렌더링할 때 기억하고, 가장 최근에 갱신된 값을 제공합니다.count변수의 값을 갱신하려면setCount를 호출하면 됩니다.
import React, { useState } from "react";
//여기서 useState가 Hook
//https://ko.reactjs.org/docs/hooks-overview.html
//버튼클릭시 값 증가
function Example() {
//'count'라는 새 상태 변수를 선언
//0은 초기값
const [count, setCount] = useState(0);
//하나의 컴포넌트 내에서 State Hook을 여러 개 사용할 수 있음
const [age, setAge] = useState(10);
const [fruit, setFruit] = useState("banana");
// const [toDos, setToDos] = useState([{ text: "Learn Hooks" }]); //여기
return (
<div>
<p>You clicked {count}times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
<h3>나이{age}살부터 사용가능</h3>
<button onClick={() => setAge(age * 2)}>Click me</button>
<h3>우리가 먹을 과일은:{fruit}</h3>
<button onClick={() => setFruit(fruit + "apple")}>과일추가</button>
{/* <h3>뭔데 넌{toDos}</h3>
<button onClick={() => setToDos(toDos + "add")}>텍스트추가요</button> 여기추가하면 왜안되지*/}
</div>
);
}
export default Example;
왜 저 todos는 안될까 에러떠
혹시 카멜표기 때문인가 싶어서 대문자 넣어봤는데 아니더라고
✌️ Hook 사용 규칙
Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 합니다.
최상위(at the top level)에서만 Hook을 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.
React 함수 컴포넌트내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다. (Hook을 호출할 수 있는 곳이 딱 한 군데 더 있습니다. 바로 직접 작성한 custom Hook 내입니다. 이것에 대해서는 나중에 알아보겠습니다~~~)
