리액트 Hooks
🔍 리액트 Hooks
- 리액트에는 클래스형 컴포넌트와 함수형 컴포넌트가 있습니다. 그 중에서 Hooks는 함수형 컴포넌트에서 사용하는 기능입니다.
- Hooks는 기존에 함수형 컴포넌트에서 할 수 없었던 상태 관리나, 렌더링 후 작업을 설정하는 기능 등의 작업을 할 수 있게 해 줍니다.
- 🐤 상태(state)란?
- 컴포넌트 내부에서 변경될 수 있는 값. props는 부모 컴포넌트로부터 넘겨받으므로, 컴포넌트 자신은 props를 바꾸지 못하는 특성이 있는 것과는 차이가 있습니다.
- 참고 : React의 state 설정하기 - https://chanhuiseok.github.io/posts/react-6/
🚩 useState
함수형 컴포넌트에서도 상태(state) 관리를 할 수 있게 해 주는 Hook 입니다.
카운터 값을 증가시키거나 감소시키는 카운터를 구현하는 코드를 짠다고 가정해 보겠습니다. 여기에서 카운터 값이 될 상태값을 useState 함수를 이용하여 변할 수 있게 짤 수 있습니다.
☝ step 1 함수형 컴포넌트에서 state를 관리할 수 있도록 useState import 하기
1
2
3
4
5
6
7
8
9
import React, { useState } from "react";
const Counter = () => {
const [value, setValue] = useState(0);
return <div></div>;
};
export default Counter;
- useState 함수를 이용하려면 import에 {useState}를 반드시 넣어야 합니다.
- 함수 body에
const [value, setValue] = useState(0);라고 쓴 부분이 있습니다. 이것은 처음 상태값(value)을 0으로 초기화하고, 그 상태값을 변경할 수 있는 setter 함수를 setValue라고 지정한 것입니다.
✌ step 2 return문에 상태값을 변경할 수 있는 버튼을 만들기
1
2
3
4
5
6
7
8
9
return (
<div>
<p>
현재 카운터 값은 <b>{value}</b>입니다.
</p>
<button onClick={() => setValue(value + 1)}></button>
<button onClick={() => setValue(value - 1)}></button>
</div>
);
- 버튼에 onClick 함수를 지정합니다. 그 함수 내부에, useState 함수를 활용하면서 지정했던 setter 함수인 setValue 함수를 사용하였습니다.
- 위처럼 작성한 형식은 화살표 함수 문법입니다. 즉, 사전에 함수를 따로 지정하고 그 함수 이름을 호출하지 않고도 단순하게 함수 body를 작성할 수 있습니다.
- 화살표 함수 문법은 () => { ..body.. } 와 같은 형태로 작성하는데, 위처럼 body에 들어갈 내용이 하나 뿐이라면
{, }를 생략할 수 있습니다.
🚩 useState의 다중 사용
만약 코드에 다음과 같이 작성했다고 가정해 보겠습니다.
1
const [value, setValue] = useState(0);
이는 value라는 하나의 상태값만 setValue 함수에서 관리할 수 있습니다.
여러가지 상태값을 사용하려면, useState를 여러 개 사용하면 됩니다.
1
2
3
4
5
6
7
8
9
const [name, setName] = useState("");
const [nickname, setNickname] = useState("");
const onChangeName = (e) => {
setName(e.target.value);
};
const onChangeNickname = (e) => {
setNickname(e.target.value);
};
- name, nickname 이라는 두 가지 상태를 사용할 수 있습니다.
- input 에서 무언가 값을 입력받을 때, onChange 이벤트 핸들링을 위해 onChangeName 등과 같은 함수를 미리 만들어 둔 것입니다.
- 만약 input 요소에서 onChange 이벤트 핸들링을 하지 않을 경우, 사용자가 input란에 무엇을 입력하더라도 칸에는 아무것도 보이지 않게 됩니다.
🚩 useEffect
컴포넌트가 렌더링될 때마다 어떠한 작업을 수행하도록 해야 한다면, 그것을 설정하는 Hook으로 useEffect를 사용합니다.
이전의 포스팅에서 컴포넌트 라이프사이클 및 메서드에 대해 살펴본 적이 있습니다. 그것들은 모두 클래스형 컴포넌트에서 사용하는 메서드들이었는데, 그 중에서 componentDidMout, componentDidUpdate의 기능을 합친 형태가 useEffect로 볼 수 있습니다.
useEffect 도 사용하려면 import가 필수입니다.
참고 : 클래스형 컴포넌트의 라이프사이클 메서드 - https://chanhuiseok.github.io/posts/react-9/
- useEffect 함수의 사용법 - 위 코드에서 return문 전에 아래와 같은 내용을 넣어 보겠습니다.
1
2
3
4
5
6
7
8
9
//...
useEffect(() => {
console.log("렌더링 완료");
console.log({
name,
nickname,
});
});
//...
개발자 도구를 확인할 경우, input 칸에 무언가 값을 입력할 때마다 리렌더링 되면서 콘솔에는 바뀌는 name이나 nickname 값이 출력될 것입니다.
- useEffect에서 설정한 함수 내용을, 컴포넌트가 화면에 맨 처음 렌더링될 때만(마운트될 때만) 실행하고 업데이트 될 때는 실행하지 않고자 할 경우 두 번째 인자에 비어있는 배열인
[]을 넣습니다.
1
2
3
4
5
//...
useEffect(() => {
console.log("렌더링 완료. 마운트될 때만 실행");
}, []);
//...
- 반대로 특정 state 값이 변할 때마다 작업을 수행하려면 두 번째 인자에 [상태명] 으로 입력하여 넣습니다.
- 아래 코드를 작성하면 name을 input에 입력할 때마다 name 값이 바뀌고 콘솔에 로그가 찍힐 것입니다.
1
2
3
4
5
//...
useEffect(() => {
console.log(name);
}, [name]);
//...
- 이처럼 useEffect 함수의 두 번째 파라미터 배열에 어떤 것을 넣느냐에 따라 실행되는 조건이 달라집니다.
이 포스팅은 리액트를 다루는 기술(저자 김민준)을 학습하는 과정에서 개인적으로 정리한 내용입니다.