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

294

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

12.4

리액트

Hooks

패턴

리액트

16

.

8

버전부터

Hooks

(훅)라는 새로운 기능이 도입되었습니다.

Hooks

를 사용하면

ES2015

의 클래스 컴포넌트를 사용하지 않고도 상태와 라이프사이클 메서드를 활용할 수 있

습니다.

Hooks

자체는 디자인 패턴이라고 할 수 없지만, 애플리케이션 설계에서 중요한 역

할을 합니다. 특히

Hooks

는 많은 전통적인 디자인 패턴을 대체할 수 있습니다. 먼저 클래스

컴포넌트가 어떻게 상태와 라이프사이클 메서드를 사용할 수 있었는지 살펴보겠습니다.

12.4.1

클래스 컴포넌트

리액트에

Hooks

가 도입되기 전에는, 컴포넌트에 상태와 라이프사이클 메서드를 추가하려면

클래스 컴포넌트를 사용해야만 했습니다. 일반적인 리액트 클래스 컴포넌트는 다음과 같은

모습을 가집니다.

class MyComponent extends React.Component {

// state 추가 및 커스텀 메서드 바인딩

constructor() {

super();

this.state = { ... };

this.customMethodOne = this.customMethodOne.bind(this);

this.customMethodTwo = this.customMethodTwo.bind(this);

}

// 라이프사이클 ...