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

307

Chapter 12_

리액트 디자인 패턴

않고도 상태와 함께 리액트의 다른 기능을 사용할 수 있습니다. 덕분에 언제든지 상태

관련 로직을 재사용할 수 있으며, 코드를 반복해서 작성할 필요가 없습니다. 이는 에러

발생 가능성을 줄이고,

Hook

으로 만들어진 순수 함수를 이용해 더욱 복잡한 로직을 구

현할 수 있게 합니다.

UI

에서 분리된 로직 공유

Hook

이 도입되기 전에는 리액트에서

UI

와 무관한 로직을 추출하고 공유할 방법이 없

었습니다. 이로 인해 고차 컴포넌트 패턴이나 렌더링

Props

와 같은 복잡한 방법을 동원

해야만 했습니다. 하지만

Hook

의 등장으로 상태 관련 로직을 단순한 자바스크립트 함

수로 추출할 수 있게 해주며 문제를 해결할 수 있었습니다.

물론

Hook

을 사용할 때 주의해야 할 몇 가지 단점도 있습니다.

■

Hook

사용 규칙을 준수해야 합니다.

Linter

플러그인을 사용하면 어떤 규칙을 위반했는지 쉽게 알 수 있습

니다.

■ 올바르게 사용하려면 상당한 연습이 필요합니다 (예:

useEffect

).

■ 잘못된 사용에 주의해야 합니다(예:

useCallback

,

useMemo

).

12.5.5

Hook

vs

Class

리액트에

Hook

이 도입되면서 새로운 문제가 발생했습니다. 함수형 컴포넌트와

Hook

을 사

용해야 할 때와 클래스 컴포넌트를 ...