10.14.22{코딩일기}벨로퍼트와 함께하는 모던리액트 1-25챕터리뷰

[ 새롭게 알게된 것 ]

---

1. 생명주기 메서드는 클래스형 컴포넌트에서만 사용가능함을 알게됨

---

useEffect랑 은근 비슷함.

물론 작동방식도 다르고 커버하지 않는 기능도 존재.

이미 작성된 코드를 보고 사용할 수 있는 정도만 학습하면 된다고 함

---

 

2. LifeCycle 메서드는 컴포넌트가 브라우저에 나타나고, 업데이트되고, 사라질때 호출되는 메서드들임

---

마운트될때 발생하는 생명주기는 constructor, render, getDerivedStateFromProps, componenDidMount가 있음

constructor는 컴포넌트 생성자로 가장 먼저 실행되는 메서드임

getDerivedStateFromProps는 props로 받아온것을 state에 넣어주고 싶을때 사용

애는 특별히 static을 필요로 하고 이 안에서는 this 조회 불가능.

다만 특정 객체를 반환하게 되면 객체안에 있는 내용들이 state로 설정됨.

이 메서드는 처음 마운트될때부터, 이후 리렌더링 되기 전에도 계속 실행됨. ->  성능에 안좋을 수 있겠군..

static getDerivedStateFromProps(nextProps, prevState) {
    console.log("getDerivedStateFromProps");
    if (nextProps.color !== prevState.color) {
      return { color: nextProps.color };
    }
    return null;
  }

componenDidMount는 언마운트되는 시점에 호출되는 메서드임. 

---

 

3. 컴포넌트가 업데이트 되는 시점의 생명주기 메서드들 종류는 총 5가지임

---

첫번째 .getDerivedStateFromProps는 props나 state가 바뀌었을때에도 호출됨.

둘째. shouldComponentUpdate는 컴포넌트가 리렌더링 할지 말지 결정하는 메서드임

주로 최적화할때 사용하는 react.memo와 비슷한 역할임

  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate", nextProps, nextState);
    // 숫자의 마지막 자리가 4면 리렌더링하지 않습니다
    return nextState.number % 10 !== 4;
  }

셋째. render

넷째. getSnapshotBeforeUpdate는 DOM상태를 미리 가져와서 반환하면 그다음 발생하게 되는 함수에서 받아와서 사용할 수 있다고함

다섯째. componentDidUpdate는 리렌더링 마치고, 화면에 모든 내용이 반영된 후 호출되는 메서드임.

3번째 파라미터로 getSnapshotBeforeUpdate에서 반환값 조회도 가능하다고 함

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // DOM 업데이트가 일어나기 직전의 시점입니다.
    // 새 데이터가 상단에 추가되어도 스크롤바를 유지해보겠습니다.
    // scrollHeight 는 전 후를 비교해서 스크롤 위치를 설정하기 위함이고,
    // scrollTop 은, 이 기능이 크롬에 이미 구현이 되어있는데,
    // 이미 구현이 되어있다면 처리하지 않도록 하기 위함입니다.
    if (prevState.array !== this.state.array) {
      const { scrollTop, scrollHeight } = this.list;

      // 여기서 반환 하는 값은 componentDidMount 에서 snapshot 값으로 받아올 수 있습니다.
      return {
        scrollTop,
        scrollHeight
      };
    }
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot) {
      const { scrollTop } = this.list;
      if (scrollTop !== snapshot.scrollTop) return; // 기능이 이미 구현되어있다면 처리하지 않습니다.
      const diff = this.list.scrollHeight - snapshot.scrollHeight;
      this.list.scrollTop += diff;
    }
  }

이 snapshot 을 통해 새로운 내용이 추가되었을때 사용자의 위치를 유지시키는데 유용하다고 함.

---

 

4. 함수형 컴포넌트 + Hooks에선 getSnapshotBeforeUpdate 대체할 기능이 아직 없다고함

---

DOM 변화가 반영되기 직전 DOM의 속성을 확인하고 싶을때 생명주기 메서드를 사용하면 좋음

---

 

5. 언마운트 관련 생명주기 메서드는 오로지 하나임.

---

바로 componentWillUnmount로 간단함.

 componentWillUnmount() {
    console.log("componentWillUnmount");
  }

---