✔ 리액트 생명주기(life cycle)
라이프 사이클(life cycle)
리액트 컴포넌트에는 생명주기가 있습니다. 이것을 라이프 사이클(life cycle)이라고 표현합니다. 생명주기란 컴포넌트가 생성되고 사용되고 소멸될 때까지 일련의 과정을 말한다. 생명주기 안에서는 특정 시점에 자동으로 호출되는 메서드가 있는데 이를 라이프 사이클 이벤트라고 한다.
🚦 라이프 사이클 이벤트 분류
React는 여러가지 컴포넌트 이벤트를 세 가지 유형(마운팅, 갱신, 언마운팅)으로 정의한다. 각 분류에 따라 이벤트가 발생되는 횟수가 다르다.
마운팅(mounting)
React 엘리먼트(컴포넌트 클래스의 인스턴스)를 DOM 노트에 추가할 때 발생하며 한 번만 실행된다.
constructor: 컴포넌트 생성자 메서드로, 컴포넌트가 생성이 되면 제일 먼저 실행이 되는 메서드입니다. state와 props를 접근하여 값을 할당할 수 있습니다.getDerivedStateFromProps: props로 받아온 것을 state에 설정하고 싶을 때 사용되며, 최초 마운트 시와 갱신 시 모두에서 render 메서드를 호출하기 직전에 호출됩니다. 특정 객체를 반환하게 되면 해당 객체의 값이 state로 갱신이 되며, null을 반환하게 되면 아무것도 갱신하지 않을 수 있습니다.render: 컴포넌트를 렌더링해주는 메서드입니다. 클래스 컴포넌트에서 반드시 구현되어야하는 유일한 메서드입니다.componentDidMount: 컴포넌트가 마운트 또는 첫 번째 렌더링이 된 직후 호출되는 메서드입니다. 이 시점에는 화면이 구현이 되어있는 상태입니다.componentDidMount에서는 DOM에 접근하여 사용할 수가 있습니다. 그래서 여기에서는 주로 AJAX 요청을 하거나 DOM에 속성을 읽거나 변경을 하는 작업을 합니다.
갱신(updating)
속성이나 상태가 변경되어 React 엘리먼트를 업데이트할 때 발생하며, 여러 번 실행된다.
getDerivedStateFromProps: 값이 갱신되어 업데이트 시에도 render 전에 메서드가 실행이 됩니다.shouldComponentUpdate: 컴포넌트를 다시 리렌더링 할지 말지 결정하는 메서드입니다. props 또는 state가 새로운 값으로 갱신되어서 렌더링이 발생하기 직전에 호출됩니다. 기본값은 true이며, return false를 하면 render을 취소할 수도 있습니다. => 주로 성능 최적화를 위해 사용이 됩니다.render: 렌더링을 해줍니다.getSnapshotBeforUpdate: 가장 마지막으로 렌더링된 결과가 DOM 등에 반영되기 전에 호출됩니다. 이 메서드를 사용하면 DOM 상태가 변경이 되기전의 값을 반환하여componentDidUpdate에서 인자로 받아서 사용이 가능합니다.componentDidUpdate: 갱신이 일어난 직후에 호출됩니다. 이 메서드는 최초 렌더링에서는 호출되지 않습니다.
언마운팅(unmounting)
React 엘리먼트를 DOM에서 제거할 때 발생하며, 한 번만 실행된다.
componentWillUnmount: 컴포넌트가 사라지기 직전에 호출을 하고, 주로 여기서는 DOM에 등록했었던 이벤트들을 제거해주는 용도로 사용됩니다.
✍ 요약
- 리액트 컴포넌트에는 생명주기가 있습니다. 이것을 라이프 사이클(life cycle)이라고 표현하며 이것은 컴포넌트가 생성되고 사용되고 소멸될 때까지 일련의 과정을 말한다.
- 생명주기 안에서는 특정 시점에 자동으로 호출되는 메서드가 있는데 이를 라이프 사이클 이벤트(마운팅, 갱신, 언마운팅)라고 한다.
🥄 참조링크
모르면 알아가야지🚀