8.2 useEffect

    useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다. 클래스형 컴포넌트의 componentDidMountcomponentDidUpdate를 합친 형태로 보아도 무방합니다.

    기존에 만들었던 Info 컴포넌트에 useEffect를 한번 적용해 보겠습니다.

    Info.js

    import React, { useState, useEffect } from 'react';
     
    const Info = () => {
      const [name, setName] = useState('');
      const [nickname, setNickname] = useState('');
      useEffect(() => {
        console.log('렌더링이 완료되었습니다!');
        console.log({
          name,
          nickname
        });
      });
     
      const onChangeName = e => {
        setName(e.target.value);
      };
     
      const onChangeNickname = e => {
        setNickname(e.target.value);
      };
     
      return (
        (...)
      );
    };
     
    export default Info;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.