React.생명주기란 무엇인가? part1.monut

사람이 태어나고 살고 죽듯 어린아이와 청소년을 거쳐 성인이 되고 어른이 되듯

 

개발분야에도 생명주기라는 이름으로 그와 비슷한 타임라인을 지니고 있다.

 

이번글에서는 프론트엔드 분야 그중에서도 React의 컴포넌트 생명주기에 대해 알아보자

(뭐 생애주기,생명주기,라이프사이클 여러 명칭으로 불리지만 글에서는 생명주기라고 표현하겠다)

 

생명주기는 무엇이고 왜 필요한가?

 

컴포넌트는 일정 시점에 사용자 혹은 웹이 로딩되며 개발자가 붙여놓은 컴포넌트가 실행되면서 부터 시행된다.

 

컴포넌트의 장착,업데이트,제거 이런 순환의 과정들을 생명주기라 하는데, 개발자는 그 시점에 필요한 기능을 

 

덧붙이고자 이 생명주기를 이용하게 된다. 

 

단순히 그 시점에 이것이 필요하다 라고 이야기하면 글 읽은 시점의 사람들은 이해가 되지 않을 수 도 있다.

 

사례라면 여러분은 하나의 컴포넌트가 업데이트 될때마다 특정 함수가 실행되어야한다고 가정해보자.

 

그렇다면 간단한 해결 책으로는 또 하나의 컴포넌트를 생성하여 그 특정 함수를 콜백하거나 호출하거나 할것이다.

 

하지만 한가지 문제가 있다 컴포넌트의 업데이트 시점을 우린 정확히 알 수 없다는것이다. 

 

해당 컴포넌트가 호출될때인지 렌더링이기 되기전인지 생성자가 해당 컴포넌트를 호출하기 전인지 말이다

 

이러한 문제를 해결하고자 리액트는 생명주기라는것을 나타내 해당 컴포넌트의 시점 별로 메서드를 구분하여

 

개발자들에게 제공하고 있다.

 

 

리액트의 생명주기

 

리액트는 컴포넌트의 생명주기를 크게 3개의 분기로 나누어두었다. 

 

사진을 보면 이해가 어느정도 될것이라 본다. 

 

한가지 분명히 할것은 dom과 render 이러한 용어들과 웹의 구조에 대해 일정 부분의 지식과 이해가 있어야 

 

우리가 실행하고자 하는 함수를 어느타이밍에 실행할지 명확하게 알 수 있다는것이다. 

 

글은 여러분이 자주 사용하게 될 상황과 필자의 사족을 붙였지만

 

니놈 뇌피셜보단 오피셜이 더 궁금하다

 

좀 더 자세한 설명을 보고 싶다면 아래의 두개의 링크를 참고하자

 

(공식 문서를 들여다보는 습관을 들이자 블로그에 써진 글 그게 설령 내 글이라도해도 공식 문서에 비하면

 

반쪽짜리이다 신뢰도나 퀄리티 면에서 말이다)

 

리액트 공식 문서

 

https://ko.reactjs.org/docs/react-component.html#render

React.Component – React

 

리액트 생명주기 메서드 다이어그램

 

https://github.com/wojtekmaj/react-lifecycle-methods-diagram

GitHub - wojtekmaj/react-lifecycle-methods-diagram: Interactive React Lifecycle Methods diagram.

 

 

영어로 하자면 monut,update,unmonut 이 3가지의 시점을 확인 할 수 있다. 

 

해당 컴포넌트는 불러온다고 무작정 불러와지는것이 아니라 

 

constructor() 이라는 생성자 메서드가 호출되며 불러와진다. 

 

즉 컴포넌트의 생성에는 총 4가지의 생명주기를 가지게 된다는 말이다(말이 너무 어렵다면 다음 기회에 다시 보길 추천한다)

 

1. constructor()

2.static getDerivedStateFromProps() 

3. render()

4. componentDidMount() 

 

 

 

mount에 있는 하위 4개의 생명주기는 우리가 컴포넌트에 어떠한 정보를 전달할것이냐 어떠한 기능을 쓸것이냐에 따라 

 

어떤 메서드를 선택해야하는지 나뉘어진다. 

 

우선 한가지 메서드 주기를 제거하고 나머지 3개를 설명하도록 하겠다.

 

 

 

★ static getDerivedStateFromProps() 은 쓰지 않는다 아쎄이!

 

해당 생명주기는 4개의 생명주기 중 사용처가 아주 드물다. mount의 생명주기에서 render 메서드를 호출하기 직전

 

호출하는데 공식문서 조차 해당 메서드를 아주 드문 사용례를 위하여 존재한다고 명시되어있다 그 드문 사용례를 

 

소개하고 있지만 애석하게도 여러분에게 그 드문사용례는 찾아오지 않을것이다. 

 

만약 면접관 혹은 현업에서 이것에 대해 질문하고 할줄 안다고 물어보면다면 과감하게 역돌격을 시전해 

 

질문에 대한 답을 하지 않도록한다.

 

해당 생명주기 메서드는 여러가지 사유로 인하여 사용하지 않는데 답은 간단하다

 

1. 위 메서드를 대체할 생명주기 메서드는 이미 많이 있다.aw

 

2. 위 메서드는 state를 갱신하기 위해 사용해야될 메서드인데 state를 변경하게 될 코드를 작성하게 되면

 

다른 메서드를 사용할때보다 코드의 양이 길어지며 가독성이 떨어진다.

 

3. 해당 메서드를 호출하여 생명주기를 사용한다면 버그나 안티패턴을 보일 가능성이 매우 크다는것이다.

 

3의 이유는 구조적인 이유가 큰데 이는 조금 복잡한 설명이 될것같으니 나중에 실제 코드 사례와 작동 사진들을

 

보며 왜 이것이 3번과 같은 사유를 유발하는지 별도의 글을 통해 설명하도록 하겠다. (part.별책부록을 따로 쓰도록 하겠다)

 

 

★ constructor() 는 컴포넌트가 마운트 되기전 우선 호출되어지는 메서드다.

 

이제 여러분들이 현업에서 자주 보게될(하지만 Didmount 보다 적게 될 가능성이 매우크다) 메서드 중 하나이다.

 

해당 생성자는 컴포넌트가 마운트 되기 전 즉 불러오게되는 페이지가 해당 컴포넌트가 어떤건지 아직 전혀 모르는

 

상태이다. 보통의 생성자 메서드는 현업에서 해당 컴포넌트의 로컬 state를 초기화 시켜 전달해야 될 경우 해당

 

라이프 사이클을 사용하게 될것이다 내부 컨텍스트에서 state에 이미 값이 있다거나 혹은 완전히 초기화 시켜야 할 경우

 

사용하게 될것이다. 혹은 인스턴스내에서 이벤트처리 메서드를 바인딩할때 사용하게 된다. 즉 여러분들이 해당 컴포넌트

 

에 이벤트를 바인당할것이다! 이러면 이시점의 생명주기 메서드를 호출하면 된다는것이다.

 

 

★ componentDidMount는 사실상 가장 많이 사용하게 될 메서드이다 반드시 암기하도록 하자

 

이 메서드는 페이지가 컴포넌트를 알수있고 이미 컴포넌트가 마운트된 직 후 달리 말하자면 dom에 삽입된 

 

직후라는 것이다. 이로써 노드를 사용하는 메서드들을 사용할 수 있는 시점이며 리액트 공식문서이자 필자가 

 

추천하는 API 통신(뭐 공식에선 외부 데이터 호출이라 말하지만)데이터를 불러와야 한다면 요청을 보내기 

 

가장 좋은 메서드이다. 혹여나 Rxjs 같은 옵저버블 같은것도 여기서 사용하면 좋다. 왜냐하면 상태 감지를 이떄부터

 

할수있기 때문이다. ( 구독 해체 부분은 다음 파트에 설명하도록 하겠다)

 

 

 

 

 

이로써 리액트의 생명주기 중 첫번째 mount 에 대해 알아보았다 어느정도 도움이 되었으면 좋겠다!