[항해99] Week04. WIL – 라이프 사이클(클래스형 vs 함수형)

👩🏻‍💻 Weekly I Learned 📚

 

이전에 리액트의 라이프 사이클에 대해서 포스팅을 한 적이 있는데, 이번에는 리액트의 클래스형 , 함수형에 따른 사이클의 메소드에 대한 자세한 이야기를 해보려고 한다.

 

⭐ 라이프 사이클 (클래스형)

클래스형에서 라이프 사이클은 세세하게 나누면 총 9개가 존재한다.
이 중에서 카테고리를 나눠보자면 크게는 3가지로 나뉘는데, 생성이 될 때(Mount), 업데이트 될 때(Update), 사라질 때(Unmount) 이다. 이해를 돋기 위해서 예전에 첨부했던 사진이지만 한번 더 첨부해본다.

 

⭐ 라이프 사이클 메소드

1️⃣ constructor

• 클래스형

생성자라는 말이다. 클래스형 컴포넌트를 만들 때 처음으로 실행된다. 이 메서드에 초기 state를 넣을 수 있다.

• 함수형

함수형에는 constructor가 없다 대신에 React Hook 중 useState 로 초기 state 값을 선언해줄 수 있다.

// Class
class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
}

// Hooks
const Example = () => {
    const [count,setCount] = useState(0);

2️⃣ getDerivedStateFromProps

잘 쓰지 않는 메서드 중 하나라고 한다. 최초 마운드 시와 갱신 시 모두에서 render 메서드를 호출하기 직전에 호출된다.

static getDerivedStateFromProps(props, state)

state를 갱신하기 위한 객체를 반환하거나, null을 반환하여 아무 것도 갱신하지 않을 수 있다. 시간의 흐름에 따라 변하는 props에 state가 의존하는 아주 드문 경우를 위하여 존재하는데, state를 끌어오면 코드가 장황해지고, 컴포넌트를 이해하기 어려워 지기 때문에 다른 대안들을 쓰는 것을 더 권장한다.

대안으로 쓰는 것이 componentDidUpdate이다

3️⃣ shouldComponentUpdate

• 클래스형

props나 state를 변경했을 때, 리렌더링을 할지 말지 결정하는 메서드이다. 이 메서드에서는 반드시 true 혹은 false를 반환해야한다.

• 함수형

훅에서는 state와 useMemo를 활용하면 렌더링 성능을 개선할 수 있다

// Class
class Example extends React.Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.value !== this.props.value
  }
}

// Hooks
const Example = React.memo(() => {
      ...
  },
  (prevProps, nextProps) => {
    return nextProps.value === prevProps.value
  }
)

4️⃣ render

컴포넌트를 렌더링할 때 절대적으로 필요한 메서드이다. 함수형에서는 render을 안 쓰고도 렌더링 할 수 있다.

// Class
class Example extends React.Component {
  render() {
    return <div>컴포넌트</div>
  }
}

// Hooks
const example = () => {
  return <div>컴포넌트</div>
}

5️⃣ getSnapshotBeforeUpdate

가장 마지막으로 렌더링된 결과가 DOM 등에 반영되었을 때에 호출됩니다. 이 메서드를 사용하면 컴포넌트가 DOM으로부터 스크롤 위치 등과 같은 정보를 이후 변경되기 전에 얻을 수 있습니다. 이 생명주기 메서드가 반환하는 값은 componentDidUpdate()에 인자로 전달된다. 함수형에서는 아직 대신할 hook이 없다.

이 메서드에 대한 사용 예는 흔하지 않지만, 채팅 화면처럼 스크롤 위치를 따로 처리하는 작업이 필요한 UI 등을 생각해볼 수 있다고한다.

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Are we adding new items to the list?
    // Capture the scroll position so we can adjust scroll later.
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // If we have a snapshot value, we've just added new items.
    // Adjust scroll so these new items don't push the old ones out of view.
    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>{/* ...contents... */}</div>
    );
  }
}

6️⃣ componentDidMount

• 클래스형

컴포넌트를 만들고 첫 렌더링을 마친 후 실행한다.

• 함수형

Hooks 에서는 useEffect를 활용하여 다음의 기능을 구현할 수 있다. 그런데 이때, useEffect의 의존값 []를 비워야지 똑같은 메서드를 구현할 수 있다

// Class
class Example extends React.Component {
    componentDidMount() {
        ...
    }
}

// Hooks
const Example = () => {
    useEffect(() => {
        ...
    }, []);
}

7️⃣ componentDidUpdate

• 클래스형

리렌더링을 완료한 후에 실행한다. 최초 렌더링에서는 호출되지 않는다. 컴포넌트가 갱신되었을 때 DOM을 조작하기 위하여 이 메서드를 활용하면 좋다. 여기서 setState()를 바로 호출할 수도 있지만, 조건문으로 감싸지 않으면 무한 리렌더링이 발생할 수 있다는 점을 주의해야한다.

• 함수형

useEffect를 사용하면 된다

componentDidUpdate(prevProps) {
  // 전형적인 사용 사례 (props 비교를 잊지 마세요)
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

8️⃣ componentWillUnmount

• 클래스형

컴포넌트를 DOM에서 제거할 때 실행합니다. omponentDidMount에서 등록한 이벤트가 있다면 여기서 제거 작업을 해야한다.

• 함수형

컴포넌트에서는 useEffect CleanUp 함수를 통해 구현할 수 있습니다

// Class
class Example extends React.Component {
    coomponentWillUnmount() {
        ...
    }
}

// Hooks
const Example = () => {
    useEffect(() => {
        return () => {
            (cleanUp)
        }
    }, []);
}

9️⃣ componentDidCatch

이 생명주기 메서드는 자손 컴포넌트에서 오류가 발생했을 때에 호출되며, 2개의 매개변수를 전달받습니다. 컴포넌트 렌더링 도중에 에러가 발생 했을 때 애플리케이션이 멈추지 않고 오류 UI를 보여줄 수 있게 해준다.

“커밋” 단계에서 호출되므로, 부수 효과를 발생시켜도 됩니다. 아래와 같이 오류 로그 기록 등을 위하여 사용하면 됩니다.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // state를 갱신하여 다음 렌더링에서 대체 UI를 표시합니다.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logComponentStackToMyService(info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // 별도로 작성한 대체 UI를 렌더링할 수도 있습니다.
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

클래스형은 익숙하지 않고 오히려 함수형인 hook useState와 useEffect에 익숙해서 라이프 사이클이 이렇게 세세하게 나뉘어있는지 처음 알았다. 😧 클래스형을 보면 라이프 사이클을 확실하게 이해할 수가 있다

참조

리액트 공식 문서 – 라이프사이클

Kyun2da.dev님 블로그

💜 This Week

📌 리액트 입문 2주차 마무리가 되었다. 입문이 2주차인건 너무 널널한거 아닌가? 했지만 현실은 아니였다. ㅎ… 미리 리액트로 작은 프로젝트를 만들어봤었던 경험이 있던 나조차도 도전적인 주였고. 여전히 미궁 속을 헤매는 기분이였다.
조금 알것 같다고 생각하면 새로운 오류를 맞이하고 해결해내고 나서 또 이제 알 것 같은데? 이러면 새로운 오류가 나를 반겼다 😵

 

📌 이번 개인과제는 과락이 되지 않기 위해서 요구사항 목록을 톱아봤다. 지난 주에 웹 어플 다 만들어두고 쓸데없는 기능더해서 과락 ㅎㅎ….
과제를 하면서 생각한건데, 기본 개념에 대한 이해가 정말 부족한 것 같다. 팀원들이 오류관련해서 물어보면 나도 겪었던 오류라서 해결책은 알려줄 수 있었다. 하지만 그게 왜 그렇게 되는지는 100% 확실하게 말을 전달하지 못 했다. 느낌아시죵~?이런 느낌으로 설명을 하다보니. 당연히 듣는 입장에서는 이해를 못 할 수 밖에. 게다가 해결책을 찾아도 그 해결책이 또 다른 오류를 낳을 확률도 있다보니 100% 자신감으로 설명해주지 못한다는게 …..😥
명확하게 이래서 이렇게 되서 이렇습니다! 라고 말 할 수 있는 날이 올거라고 믿지만. 그게 지금이 아니라는게 힘을 쫙쫙 빠지게 한다.