WIL_21.11.28

이전 글에서 라이프사이클에 대해 작성 했다
사이클이 어떻게 돌아가는지 아직 익숙하지 않기에
한 눈에 확인이 가능한 클래스형으로 작성을 했다

오늘은 함수 컴포넌트에서 라이프사이클을 알아보자
클래스 컴포넌트에서 라이프사이클을 메소드 대신
함수 컴포넌트에서 연동 할 수 있게 해주는 함수가 바로 훅이다
(Hook은 class 안에서는 동작X 대신 class 없이 React를 사용할 수 있게 해주는 것)

Class 생명주기 메서드를 훅으로 대응하는 방법

• constructor: 함수 컴포넌트는 constructor가 필요하지 않다
  useState 호출에서 state를 초기화 할 수 있다
• shouldComponentUpdate: React.memo
• render: 이것은 함수 컴포넌트 본체 자체
  -componentDidMount, componentDidUpdate, componentWillUnmount: useEffect Hook은 이들의 모든 조합을 표현 가능

useState

const [state, setState] = useState(initialState);

• 상태 유지 값과 그 값을 갱신하는 함수를 반환
• 최초로 렌더링을 하는 동안, 반환된 state(state)는
  첫 번째 전달된 인자(initialState)의 값과 같다
• setState 함수는 state를 갱신할 때 사용
  새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록

useEffect

기본 형태

useEffect(effect, [, deps]);

간단한 사용 예제
아래 코드는 클래스 컴포넌트인데
최초 렌더링 시에도 count를 표시하고 싶고,
업데이트될 때에도 count를 갱신하고 싶으면 두 메서드를 다 사용해야 한다.

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
 
    componentDidMount() {
      document.title = `You clicked ${this.state.count} times`;
    }
 
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click Me
        </button>
      </div>
    );
  }
}class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
 
    componentDidMount() {
      document.title = `You clicked ${this.state.count} times`;
    }
 
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click Me
        </button>
      </div>
    );
  }
}

하지만! useEffect를 사용하면?

	import React, { useState, useEffect } from "react";
 
const Example = () => {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </div>
  );
};
export default Example;

useEffect를 사용하면 작업을 수행하는 코드를 중복할 필요가 없다