Hook은 함수형 컴포넌트에서도 상태를 관리할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다.
useState
useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 준다.
함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 된다.
Counter.js파일을 생성해보자.
import React, { useState } from "react";
const Counter = () => {
const [value, setValue] = useState(0);
return (
<div>
<p>현재 카운터 값은 {value}입니다. </p>
<button onClick={() => setValue(value + 1)}>+1</button>
<button onClick={() => setValue(value - 1)}>-1</button>
</div>
);
};
export default Counter;
useState는 코드 상단에서 import구문을 통해 불러온다.
useState의 함수의 파라미터에는 함수의 기본값을 넣어준다. (현재는 기본값이 0이다.)
이 함수가 호출되면 배열을 반환한다.
그 배열의 첫 번째 원소는 상태값, 두 번째 원소는 상태를 설정하는 함수이다.
이 함수에 파라미터를 넣어서 호출하면, 전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리렌더링 된다.
App.js
import React from "react";
import Counter from "./Counter";
function App() {
return (
<div>
return <Counter />
</div>
);
}
export default App;
useState를 여러번 사용하기
import React, { useState } from "react";
const Info = () => {
const [name, setName] = useState("");
const [nickname, setNickName] = useState("");
const onChangeName = (e) => {
setName(e.target.value);
};
const onChangeNickName = (e) => {
setNickName(e.target.value);
};
return (
<div>
<div>
<input value={name} onChange={onChangeName} />
<input value={nickname} onChange={onChangeNickName} />
</div>
<div>
<div>
<b>이름:</b>
{name}
</div>
<div>
<b>닉네임:</b>
{nickname}
</div>
</div>
</div>
);
};
export default Info;
App.js를 아래와 같이 바꿔보자.
import React from "react";
import Info from "./Info";
function App() {
return (
<div>
return <Info />
</div>
);
}
export default App;
결과물
useEffect
useEffect는 리액트 컴포넌트가 렌더링될때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다.
import React, { useState, useEffect } from "react";
const Info = () => {
const [name, setName] = useState("");
const [nickname, setNickName] = useState("");
useEffect(() => {
console.log("렌더링이 완료되었습니다.");
console.log({
name,
nickname,
});
});
const onChangeName = (e) => {
setName(e.target.value);
};
const onChangeNickName = (e) => {
setNickName(e.target.value);
};
return (
<div>
<div>
<input value={name} onChange={onChangeName} />
<input value={nickname} onChange={onChangeNickName} />
</div>
<div>
<div>
<b>이름:</b>
{name}
</div>
<div>
<b>닉네임:</b>
{nickname}
</div>
</div>
</div>
);
};
export default Info;
마운트될 때만 실행하고 싶을 때, 배열의 두 번째 파라미터로 비어 있는 배열을 넣어주면 된다.
useEffect(() => {
console.log("마운트될 때만 실행됩니다.");
}, []);
또한 다음과 같이 작성하면 value값이 변할 때만 특정 작업을 수행하기도 한다.
useEffect(() => {
console.log(name);
}, [name]);
