리액트 훅이란?

리액트 훅은 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있도록 해 주는 기능입니다. 훅을 통해서 함수형 컴포넌트에서도 컴포넌트의 상탯값을 관리할 수 있고, 컴포넌트의 생명 주기 함수를 이용할 수 있습니다.

훅을 사용하면 재사용 가능한 로직을 쉽게 만들 수 있습니다. 이는 훅이 단순한 함수이므로 함수 안에서 다른 함수를 호출하는 것으로 새로운 훅을 만들 수 있기 때문입니다. 따라서 리액트의 내장 훅과 다른 사람들이 만든 여러 커스텀 훅을 레고처럼 조립해서 새로운 훅을 쉽게 만들 수 있습니다.

클래스형 컴포넌트의 생명 주기 메서드 경우 서로 다른 로직이 하나의 메서드에 섞여 있어서 가독성이 좋지 않습니다. 같은 로직이 componentDidMount와 componentDidUpdate 메서드에 중복으로 들어가기도 했습니다. 그러나 훅을 사용하면 같은 로직을 한곳으로 모을 수 있어서 가독성이 좋습니다.

그밖에 훅은 단순한 함수이므로 정적 타입 언어로 타입을 정의하기 쉽습니다. 이는 상당히 귀찮고 까다로운 작업이었던 고차 컴포넌트의 타입 정의와 비교되는 부분입니다.

리액트 훅이 가져올 변화

훅은 지금까지의 리액트 프로그래밍 패턴에 큰 변화를 가져올 것으로 보입니다. 클래스형 컴포넌트의 입지는 점점 줄어들고, 로직을 재사용하기 위해 사용했던 고차 컴포넌트와 렌더 속성값 패턴도 지금처럼 자주 사용되지는 않을 것으로 보입니다. 그렇다고 기존에 작성한 수많은 코드를 변경해야 하는 것은 아닙니다. 페이스북 제품에서 리액트로 작성한 코드가 상당히 많기 때문에 리액트는 항상 하위 호환성을 중요시합니다. 따라서 기존에 작성했던 클래스형 컴포넌트를 반드시 함수형 컴포넌트로 변경해야 한다는 압박을 느낄 필요는 없습니다. 하지만 새로 시작하는 프로젝트라면 클래스형 컴포넌트는 지양하고 훅을 사용하는 게 앞으로를 위해서라도 좋은 선택입니다.

《실전 리액트 프로그래밍》

이 책에서는 내장 훅의 사용법으로 훅에 대한 얘기를 시작합니다. 그리고 클래스형 컴포넌트에 익숙한 분들을 위해 클래스형 컴포넌트의 각 생명 주기 메서드를 어떻게 훅으로 구현할 수 있는지 알아봅니다. 마지막으로 커스텀 훅을 클래스형 컴포넌트에서도 사용하기 위한 몇 가지 방법을 설명합니다.

리액트 훅을 전혀 모르더라도 이 책을 통해 훅의 개념과 사용법을 이해할 수 있습니다. 그리고 클래스형 컴포넌트의 각 생명 주기 메서드를 훅으로 구현하는 방법과 커스텀 훅을 클래스형 컴포넌트에서도 사용하기 위한 방법을 익힘으로써 기존 프로젝트에서도 어렵지 않게 훅을 사용할 수 있습니다.

물론 이 책에서는 리액트 훅만 다루는 게 아닙니다. 리액트의 기본 사용법과 핵심 원리, 리액트 개발 환경을 직접 구축하는 방법, 서버사이드 렌더링, 타입스크립트, 리덕스로 상태를 관리하는 법 등등 실전에서 활용할 수 있는 리액트 관련 기술을 다룹니다. 기존의 입문자용 리액트 책이 심심하다고 느꼈던 분들이라면 재밌게 읽을 수 있을 겁니다. 단순히 기술을 설명하고 마는 게 아니라 왜 리액트에서 사용하는지, 어떻게 사용해야 하는지에 초점을 맞추어 설명했습니다. 더불어 책의 끝에 나오는 리액트의 파이버를 통해 다가올 리액트의 변화에 대비할 수 있습니다.

《실전 리액트 프로그래밍》의 예제 파일의 소스코드는 깃허브에서 제공합니다.

yes24 교보문고 알라딘 인터파크