안녕하세요. 여러분은 함수형 컴포넌트를 사용해 보신 적이 있으신가요?
그럴 때마다 상태관리를 어떻게 해야 할지 곤란하시죠. 함수형 컴포넌트에서는 상태를 관리할 수 있는 Hooks를 이용해야 합니다.
오늘은 React Hooks에 대해 알아보도록 하겠습니다!
UseState
가장 기본적인 Hook으로서, 함수형 컴포넌트에서 가변적인 상태를 유지할 수 있도록 해줍니다.
함수형 컴포넌트에서 상태를 관리해야 하는 일이 생기면 UseState를 사용하면 됩니다!
아래 예제를 보도록 하겠습니다.
import React, { useState } from "react";
export default function App() {
// "count"라는 새 상태 변수를 선언합니다
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
예제 코드1
위의 예제 코드를 한줄 한줄 해석해보도록 하겠습니다.
// "count"라는 새 상태 변수를 선언합니다
const [count, setCount] = useState(0);
예제 코드2
이 문법이 헷갈리실 수도 있습니다. 이 문법은 구조 분해 할당 문법입니다.
여기로 가시면 구조 분해 할당에 대한 자세한 설명이 나와 있습니다.
이 함수의 파라미터에는 상태의 기본값을 넣어줍니다.
count에는 현재 useState(0)입니다. 즉, 기본값을 0으로 설정 한다는 뜻입니다.
이 함수가 호출되면 배열이 반환되는데, 첫 번째 원소는 상태 값을 의미하고, 두 번째 원소는 상태를 설정하는 함수입니다.
이 두 번째, 함수에 파라미터를 넣어서 호출하게 되면 전달받은 파라미터로 값이 바뀌게 되고 컴포넌트를 리 렌더링이 됩니다 .
<p>You clicked {count} times</p> // 상태 값
<button onClick={() => setCount(count + 1)}>Click me</button> // 상태를 설정하는 함수
예제 코드3 (상태 값과, 상태를 설정하는 함수)
여러 State 변수 선언하기
function ExampleWithManyStates() {
// 상태 변수를 여러 개 선언했습니다!
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
// ...
}
예제 코드3 (여러개의 useState)
useState 함수는 하나의 상태 값만 관리를 하므로 여러 개의 상태를 관리하기 위해서는 여러 개의 useState를 사용하시면 됩니다.
UseEffect
리엑트의 컴포넌트가 렌더링 될 때 특정 작업을 수행하도록 설정하는 Hook입니다.
클래스형 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnMount를 합친 형태라고 생각하셔도 됩니다.
1. componentDidMount
useEffect(() => {
console.log("componentDidMount");
}, []);
예제 코드4(componetDidMount)
useEffect에서 컴포넌트가 가장 처음 렌더링 될 때만 실행되고 업데이트 할 경우 혹은 실행 할 필요가 없는 경우엔 함수의 두번째 파라미터로 비어있는 배열을 넣어주시면 됩니다.
2. componentDidUpdate
componentDidUpdate(prevProps, prevState) {
if (prevProps.value !== this.props.value) {
valueUpdate();
}
}
예제 코드5(componentDidUpdate)
클래스형 컴포넌트에서는 아래의 코드처럼 작성해야합니다.
useEffect(() => {
console.log(count);
}, [count]);
예제 코드6(componentDidUpdate)
useEffect에서 사용하는 방법은 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어주시면 됩니다.
3. componentWillUnMount
useEffect(() => {
console.log("effect");
console.log(count);
return () => {
console.log("cleanup");
console.log(count);
};
});
예제 코드7(componentWillUnMount)
컴포넌트가 UnMount 되기 전이나, Update 되기 전에 어떠한 작업을 수행하고 싶다면 useEffect에 cleanUp 함수를 반환해주면 됩니다.
.
.
.
이상으로 Hooks의 useState와 useEffect에 대해서 알아보았습니다.
다음 시간에는 커스텀 Hooks 만들어 보도록 하겠습니다.
감사합니다.
