<실전 리액트 프로그래밍> 개정판 소식

Jun 26, 2020

<실전 리액트 프로그래밍> 개정판이 나왔습니다. (링크)

개정판에서는 모든 예제 코드를 훅으로 작성했습니다.
기존에는 훅을 소개하는 정도였다면, 개정판에서는 본격적으로 훅을 다룹니다.

혹시 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;
}

<실전 리액트 프로그래밍> 개정판을 기반으로 인프런에서 동영상 강의를 할 예정입니다. 빠르면 7월말에, 늦어도 8월 중에 오픈할 것 같아요

2020–07–29 업데이트: 인프런 강의를 오픈했습니다. 링크

<실전 리액트 프로그래밍> 개정판 소식

Written by landvibe