constructor()

• componentDidMount() 보다 먼저, 최초 1회만 실행되어야 한다.

--------------------------------------------------------

// 클래스형 컴포넌트 - constructor ()

class ClassCompo extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      name: `${props.firstName} ${props.lastName}`,
    }
    callApi();
  }
  // ...
}

--------------------------------------------------------

// 함수형 컴포넌트 - constructor() 처럼 구현

function Compo ({firstName, lastName}) {
  const [name, setName] = useState(`${firstName} ${lastName}`);
  const isFirstRef = useRef(true); // state와 관련 없는 변수사용을 위해 useRef사용
  if (isFirstRef.current) {
    isFirstRef.current = false; // 일회용 사용을 위해 변수 값 변경!
    callApi()
  }
  // ...
}
--------------------------------------------------------

componentDidMount()

useEffect로 componentDidMount() 구현하기

compoentnDidUpdate()

useEffect로 compoentnDidUpdate() 구현하기 #1
useEffect로 compoentnDidUpdate() 구현하기 #2

compoenetWillUnmount()

useEffect로 compoenetWillUnmount() 구현하기

getDerivedStateFromProps()

--------------------------------------------------------

// 클래스형 컴포넌트 - getDerivedStateFromProps ()

class ClassCompo extends React.Component {
  state = {isFaster:false, prevSpeed:0}
  static getDerivedStateFromProps(props, state){
    if (props.speed !== state.prevSpeed){
      return {
        isFaster:props.speed > state.prevSpeed, prevSpeed:props.speed
      }
    }
    return null;
  }
  render () {
    const {isFaster} = this.state;
    return (
      <p>{isFaster ? 'yes' : 'no'}</p>
    )
  }
  // ...
}

--------------------------------------------------------

// 함수형 컴포넌트 - getDerivedStateFromProps() 처럼 구현

function Compo ({speed}) {
  const [isFaster, setIsFaster] = useState(false);
  const [prevSpeed, setPrevSpeed] = useState(0);
  if (speed !== prevSpeed) {
    setIsFaster(speed > prevSpeed);
    setPrevSpeed(speed);
  }
  return <p>{isFaster ? 'yes' : 'no'}</p>;
  // ...
}
--------------------------------------------------------

forceUpdate()

• useReducer() 사용하여 작성

function Compo () {
  const [_, forceUpdate] = useReducer((s) => s+1, 0);
  const onClick = () => forceUpdate();
  // ...
}

참고 : 책 : 실전 리액트 프로그래밍/이재승 저