2021-03-23React3 minutes read (About 509 words) 0 visits

[리액트]컴포넌트 생명주기

컴포넌트 라이프 사이클 순서는 아래와 같다.

컴포넌트 라이프 사이클 순서

constructor → componentWillMount → render → ref → componentDidMount
componentWillMount 는 실무에서 잘 쓰지않는다.’
위의 순서 끝난 뒤 setState/props 바뀌는 경우 → shouldComponentUpdate(true) → render → componentDidUpdate
부모컴포넌트가 나를 없앤 경우 → componentWillUnmount → 소멸

component함수

componentDidMount() : render가 처음 성공적으로 실행된 후 바로 componentDidMount() 가 실행된다. 리랜더링일땐 실행되지 않는다.
- 비동기 요청
- eX) setInterval()
componentDidUpdate() : 리랜더링된 후 실행.
componentWillUnmount(): 컴포넌트가 제거되지 직전 비동기요청을 componentWillUnmount() 로 할 수 있다.
- 비동기 요청 정리
- 완료되지않은 비동기요청을 여기서 정리해줘야함.

//class버전

interval;

  componentDidMount() { // 컴포넌트가 첫 렌더링된 후, 여기에 비동기 요청을 많이 해요
    this.interval = setInterval(this.changeHand, 100);
  }

  componentWillUnmount() { // 컴포넌트가 제거되기 직전, 비동기 요청 정리를 많이 해요
    clearInterval(this.interval); // 완료되지않은 비동기요청을 여기서 정리해줘야한다
  }

//Hooks버전
const interval = useRef();

  //useEffect는 componentDidMount, componentDidUpdate, componentWillUnmount에 대해 1대1대응은 아니지만 셋의 역할을 하나로 합쳤다고 할수있다.
  //componentDidMount, componentDidUpdate역할
  useEffect(() => {
    interval.current = setInterval(changeHand, 100); //0.1초
    return () => {
      //componentWillUnmount역할
      clearInterval(interval.current);
    };
  }, [imgCoord]); //빈 배열이면 componentDidMount역할만 수행
//배열에 다시 실행 할 값을 넣어주면componentDidMount + componentDidUpdate역할

//Hooks버전에서 componentDidMount만 사용하고 싶다면?
useEffect(() => {
    //ajax
  }, []); //빈배열로 놔두기

//Hooks버전에서 componentDidMount 말고 componentDidUpdate만 사용하고 싶다면?
const mounted = useRef(fasle);
  useEffect(() => {
    if (!mounted.current) {
      mounted.current = true;
    } else {
      //ajax 처리
    }
  }, []); //배열에는 바뀌는 값입력