자바스크립트 + 리액트 디자인 패턴

297

Chapter 12_

리액트 디자인 패턴

12.4.3

복잡성 증가

클래스 컴포넌트에 더 많은 로직을 추가할수록 컴포넌트의 크기는 빠르게 증가합니다. 컴포

넌트 내부의 로직은 얽히고 구조화되지 않을 수 있으며, 개발자는 특정 로직이 클래스 컴포

넌트의 어디에서 사용되는지 이해하기 어려워집니다. 이러한 복잡성 증가 현상이 디버깅과

성능 최적화를 더욱 어렵게 만들며 라이프사이클 메서드 또한 상당한 중복 코드를 발생시키

기도 합니다.

12.4.4

Hooks

클래스 컴포넌트가 항상 최선의 선택은 아닙니다. 클래스 컴포넌트를 사용할 때 겪는 일반적

인 문제를 해결하기 위해 리액트는

Hooks

를 도입했습니다. 리액트

Hooks

는 컴포넌트의 상

태와 라이프사이클 메서드를 관리할 때 사용할 수 있는 함수입니다. 리액트

Hooks

를 사용하

면 다음과 같은 구현이 가능합니다.

■ 함수형 컴포넌트에 상태 추가하기

■

componentDidMount

,

componentWillUnmount

같은 라이프사이클 메서드를 사용하지 않고도 컴포넌트

의 라이프사이클 관리하기

■ 여러 컴포넌트 간에 동일한 상태 관련 로직 재사용하기

먼저 리액트

Hooks

를 사용하여 함수형 컴포넌트에 상태를 추가하는 방법을 살펴보겠습

니다.

12.5

상태

Hook

리액트는 함수형 컴포넌트 내에서 상태를 관리하는

useState

라는

Hook

을 제공합니다.

useState

Hook

을 사용하여 클래스 컴포넌트를 함수형 컴포넌트로 어떻게 변환할 수 있는

지 살펴봅시다. 입력 필드를 렌더링하는

Input ...