리액트 공부하면서 ‘이건 대체 왜 쓰는거지’라는 생각이 드는 부분들을
하나하나 속시원하게 뜯어서 알려줍니다.
ㅁ****

리액트 개발자로서 알아야 할 지식을 상세하게, 주요 라이브러리의 구조까지
꽤 파고들어서 어떤 식으로 작동하는지 이해하도록 합니다.
나****

기본 지식을 쌓기에 좋아요
ju****

이 책을 시작으로 구조를 잡고 프로젝트 진행해가면서 각자의 노하우를
녹여가는 게 프론트엔드 프로젝트를 리액트로 진행할 때 좋은 방법이 될 것 같아요.
해****

리액트로 코딩하면서 평소 궁금했던 것들이 많았는데,
책을 읽으면서 하나씩 알아가는 재미가 있네요.
야****

핵심 원리로 리액트의 기본 개념을 다지고, 실전 예제로 리액트 활용법을 익힐 수 있어 많은 분께 사랑받았던 《실전 리액트 프로그래밍》이 개정판으로 출간됩니다.

리액트 훅이 16.8 버전에 새로 추가된 후 저자는 현업에서 리액트 훅을 사용해 왔습니다. 실전에서 쌓은 경험을 바탕으로 개정판의 예제 코드는 전부 리액트 훅으로 작성했습니다. 단순히 기술을 설명하고 마는 게 아니라 왜 리액트에서 사용하는지, 어떻게 사용해야 하는지에 초점을 맞추어 설명했습니다.

리액트 훅이란?

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

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

리액트 훅의 장점

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

class Profile extends React.Component {
  state = {
    user: null,
  };
  componentDidMount() {
    const { userId } = this.props;
    getUserApi(userId).then(data => this.setState({ user: data }));
  }
  componentDidUpdate(prevProps) {
    const { userId } = this.props;
    if (userId !== prevProps.userId) {
      getUserApi(userId).then(data => this.setState({ user: data }));
    }
  }
}

그러나 훅을 사용하면 같은 로직을 한곳으로 모을 수 있어서 가독성이 좋습니다.

function Profile({ userId }) {
  const [user, setUser] = useState(null);
  useEffect(() => {
    getUserApi(userId).then(data => setUser(data));
  }, [userId]);
  // ...
}

컴포넌트의 공통 로직을 고차 컴포넌트(HoC)로 작성해 왔을 겁니다. 고차 컴포넌트는 코드가 다소 복잡하며, 많이 사용할수록 리액트 요소 트리도 복잡해집니다. 게다가 정적 타입 언어인 타입스크립트를 사용한다면 타입 정의 또한 까다롭습니다.

function withMounted(InputComponent) {
  return class OutputComponent extends React.Component {
    state = {
      mounted: false,
    };
    componentDidMount() {
      this.setState({ mounted: true });
    }
    render() {
      const { mounted } = this.state;
      return <InputComponent {...this.props} mounted={mounted} />;
    }
  };
}

훅을 이용하면 다음과 같이 간편하게 작성할 수 있습니다.

function useMounted() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  return mounted;
}

이 책에서 다루는 내용

리액트의 기본적인 사용법과 핵심 원리부터 시작합니다. 예제는 전부 리액트 훅으로 만들어져 있지만, 클래스형 컴포넌트를 사용하는 레거시 프로젝트를 어떻게 다루는지도 알려줍니다. 서버사이드 렌더링, 타입스크립트로 리액트 코드를 작성하는 방법, 리덕스 등도 함께 다룹니다. 이 책의 마지막에는 논블로킹 렌더링을 가능하게 해 주는 concurrent 모드를 다루어 다가올 리액트의 변화에도 대비할 수 있습니다.

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

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