20251105 리액트 수업

LG 유플러스 유레카 프론트엔드반 수업을 듣고 배운 내용과 궁금했던 내용을 찾아서 정리하려고 한다.

오늘은 리액트 라이프사이클 메서드에 대해 배웠다.

리액트 라이프사이클

리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝이 난다.

 

라이프 사이클을 다루는 것은 컴포넌트가 생겨나고, 변화하고, 없어지는 일련의 프로세스를 프로그래머가 통제하는 것을 뜻한다. 우리는 실제로 HTML을 작성한 것이 아니고 JSX를 작성했기 때문에 이런 부분을 알아야 한다. 라이프 사이클을 이해하게 되면, 왜 그동안 리액트에 render 메서드를 작성만 했는데도 브라우저에게 어떻게 HTML을 만들어주었는지 알 수 있게 된다.

 

생성자를 통해서 필요한 메모리를 할당하고 객체의 역할이 끝나면 소멸자를 통해 메모리를 반환한다. 컴퓨터의 자원은 한정적이기 때문에 역할이 끝나면 모든 메모리를 반환해야 메모리 누수에 대한 문제가 생기지 않고 더 좋은 성능을 발휘할 수 있다. 라이프 사이클이 있는 이유는 메모리 비우기가 가장 큰 이유이다.

 

라이프사이클의 분류

출처 : https://velog.io/@remon/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9D%B4%ED%94%84-%EC%82%AC%EC%9D%B4%ED%81%B4

위 사진은 클래스형 

라이프사이클은 총 세 가지 마운트, 업데이트, 언마운트 카테고리로 나눈다. 

마운트

DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 한다. 이때 호출하는 메서드는 다음과 같다.

1. 컴포넌트 만들기
2. constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드이다.
3. getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드이다.
4. render : 우리가 준비한 UI를 렌더링하는 메서드이다.
5. componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드이다.

업데이트

컴포넌트는 다음과 같은 총 네 가지 경우에 업데이트한다.

1. props가 바뀔 때
2. state가 바뀔 때
3. 부모 컴포넌트가 리렌더링될 때
4. this.forceUpdate로 강제로 렌더링을 트리거할 때

위 그림의 업데이트 메서드들을 정리하면 다음과 같다.

• getDerivedStateFromProps : 이 메서드는 마운트 과정에서도 호출되며, 업데이트가 시작하기 전에도 호출된다. props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용한다.
• shouldComponentUpdate : 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드이다. 이 메서드에서는 true 혹은 false 값을 반환해야 하며, true를 반환하면 다음 라이프사이클 메서드를 계속 실행하고, false를 반환하면 작업 중이한다. 즉, 컴포넌트가 리렌더링되지 않는다. 만약 특정 함수에서 this.forceUpdate() 함수를 호출한다면 이 과정을 생략하고 바로 render 함수를 호출한다.
• render : 컴포넌트를 리렌더링한다.
• getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드이다.
• componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드이다.

언마운트

마운트의 반대 과정이다. 컴포넌트를 DOM에서 제거하는 것을 언마운트라고 한다.

• componentWillUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드이다.

 

느낀 점

리액트의 라이프 사이클에 대해 이해할 수 있었다. 새로고침은 마운트라는 것을 알았고 리렌더링이 아니라는 것을 알았다.

처음엔 어렵게만 느껴졌는데 정리하면서 보니 이해가된 것 같아 기분이 좋다.

 

참고 자료

https://velog.io/@remon/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9D%B4%ED%94%84-%EC%82%AC%EC%9D%B4%ED%81%B4

[React] 리액트 라이프 사이클

도서 : 리액트를 다루는 기술