ReactJS - 컴포넌트 라이프 사이클을 React Hooks를 사용하여 탐구해보자
안녕하세요, 야심찬 개발자 여러분! 오늘 우리는 ReactJS의 세계로 흥미로운 여정을 떠납니다. React Hooks를 사용한 컴포넌트 라이프 사이클에 중점을 두겠습니다. 프로그래밍에 새로운 분이라면 걱정하지 마세요 - 명확한 설명과 많은 예제를 통해 단계별로 안내해드리겠습니다. 그麼, 시작해보겠습니다!
React Hooks 소개
컴포넌트 라이프 사이클에 들어가기 전에 React Hooks이 무엇인지 이해해보겠습니다. Hooks는 특별한 도구로, 클래스를 작성하지 않고도 상태(state)와 다른 React 기능을 사용할 수 있게 해줍니다. Hooks는 기능형 컴포넌트에게 초능력을 주는 마법의 지팡이 같은 것입니다!
Hooks의 이유
옛날날(그렇게 오래 전이 아니지만, 기술의 연도로 따지면) 우리는 상태와 부수 효과를 관리하기 위해 클래스 컴포넌트를 사용해야 했습니다. 하지만 클래스는 초보자에게 혼란을 줄 수 있습니다. Hooks는 이 과정을 단순화하여 코드를 깨끗하고 재사용 가능하게 만듭니다.
컴포넌트 라이프 사이클
우리와 마찬가지로, React 컴포넌트도 라이프 사이클이 있습니다. 태어나서(마운트), 성장하고 변화하다가( 업데이트), 결국 더 이상 필요하지 않아지며( 언마운트). 이 라이프 사이클을 이해하는 것은 효율적인 React 애플리케이션을 만드는 데 필수적입니다.
컴포넌트의 세 가지 단계
- 마운트: 컴포넌트가 DOM에 추가되는 단계입니다.
- 업데이트: 컴포넌트가 props나 상태의 변경으로 인해 다시 렌더링되는 단계입니다.
- 언마운트: 컴포넌트가 DOM에서 제거되는 단계입니다.
이제 Hooks를 사용하여 이러한 단계를 관리하는 방법을 살펴보겠습니다!
useState: 컴포넌트 상태 관리
useState Hook는 기능형 컴포넌트에 상태를 추가하는 데 사용되는 기본 도구입니다. 예제를 보겠습니다:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>당신은 {count} 번 클릭했습니다</p>
<button onClick={() => setCount(count + 1)}>
클릭해보세요
</button>
</div>
);
}이 예제에서 useState(0)는 상태 변수 count를 0으로 초기화합니다. setCount 함수는 이 상태를 업데이트할 수 있게 해줍니다. 버튼을 클릭할 때마다 setCount(count + 1)이 호출되어 count가 증가하고 컴포넌트가 다시 렌더링됩니다.
useEffect: 부수 효과 처리
useEffect Hook는 컴포넌트 내에서 부수 효과를 관리하는 데 유용한 다용도 도구입니다. 여러 가지 라이프 사이클 메서드의 기능을 결합한 것입니다.
import React, { useState, useEffect } from 'react';
function ExampleComponent() {
const [data, setData] = useState(null);
useEffect(() => {
// 이 효과는 모든 렌더링 후에 실행됩니다
console.log('컴포넌트가 렌더링되었습니다');
// API 호출 시뮬레이션
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
};
fetchData();
// 정리 함수
return () => {
console.log('컴포넌트가 언마운트되거나 다시 렌더링됩니다');
};
}, []); // 빈 의존성 배열은 이 효과가 마운트 시에만 한 번 실행된다는 의미입니다
return (
<div>
{data ? <p>{data}</p> : <p>로딩 중...</p>}
</div>
);
}이 예제는 여러 가지 중요한 개념을 보여줍니다:
- 효과는 컴포넌트가 렌더링된 후에 실행됩니다.
- API 호출을 시뮬레이션합니다.
- 정리 함수는 컴포넌트가 언마운트되기 전이나 효과가 다시 실행되기 전에 실행됩니다.
- 빈 의존성 배열
[]은 이 효과가 마운트 시에만 한 번 실행된다는 의미입니다.
커스텀 Hooks: 재사용 가능한 로직 생성
Hooks의 가장 강력한 기능 중 하나는 커스텀 Hooks를 만들 수 있다는 것입니다. 이를 통해 컴포넌트 로직을 재사용 가능한 함수로 추출할 수 있습니다. 입력 필드를 처리하는 커스텀 Hooks를 만들어보겠습니다:
import { useState } from 'react';
function useInput(initialValue) {
const [value, setValue] = useState(initialValue);
const handleChange = (event) => {
setValue(event.target.value);
};
return [value, handleChange];
}
// 커스텀 Hooks 사용
function LoginForm() {
const [username, handleUsernameChange] = useInput('');
const [password, handlePasswordChange] = useInput('');
const handleSubmit = (event) => {
event.preventDefault();
console.log(`${username}와 ${password}로 로그인 중`);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={username}
onChange={handleUsernameChange}
placeholder="사용자 이름"
/>
<input
type="password"
value={password}
onChange={handlePasswordChange}
placeholder="비밀번호"
/>
<button type="submit">로그인</button>
</form>
);
}이 커스텀 useInput Hooks는 입력 필드를 처리하는 로직을 캡슐화하여 LoginForm 컴포넌트를 더 깨끗하고 재사용 가능하게 만듭니다.
React Children 속성 (포함)
React의 children 속성을 사용하면 다른 컴포넌트를 데이터로 전달할 수 있어, 래퍼 컴포넌트를 만드는 데 유용합니다. 이 개념은 종종 "포함"으로 불립니다.
function Panel({ children, title }) {
return (
<div className="panel">
<h2>{title}</h2>
{children}
</div>
);
}
function App() {
return (
<Panel title="환영합니다">
<p>이것은 패널 내용입니다.</p>
<button>클릭해보세요!</button>
</Panel>
);
}이 예제에서 Panel 컴포넌트는 자식으로 전달된 모든 콘텐츠를 감싸고, 이를 통해 높은 재사용성을 가집니다.
결론
오늘 많은 내용을 다루었습니다! React Hooks의 기본 개념에서 컴포넌트 라이프 사이클 탐구, 그리고 커스텀 Hooks 생성에 이르기까지. 기억하시길, 연습이 완성을 낳는다는 점을 잊지 마시고, 이 개념들을 자신의 프로젝트에서 실험해보세요.
이제 다루었던 Hooks의 빠른 참고 표를 제공합니다:
| Hook | 목적 | 예제 |
|---|---|---|
| useState | 컴포넌트 상태 관리 | const [count, setCount] = useState(0); |
| useEffect | 부수 효과 처리 | useEffect(() => { /* effect */ }, []); |
| 커스텀 Hooks | 재사용 가능한 로직 생성 | const [value, handleChange] = useInput(''); |
행복한 코딩을 하시고, Hooks가 함께 하길 바랍니다!
Credits: Image by storyset