리액트(React) - 컴포넌트의 라이프사이클 및 메서드

리액트를 공부하면서 쓰는 글이니 오류가 있을 수 있습니다. 오류가 있다면 알려주세요!

 

리액트에는 컴포넌트의 생명주기가 있습니다. 이 생명주기(라이프사이클)에 맞춰 호출되는 메서드를 재정의하여 컴포넌트가 생성될 때나 사라질 때 필요한 작업을 할 수 있게 됩니다.

출처:https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

리액트에서 생명주기는 마운트 - 업데이트 - 언마운트로 진행됩니다. 3가지로 구성되어있는 생명주기에 어떤 메서드가 있는지 알아봅니다.

 

마운트(생성)

마운트는 컴포넌트가 생성되어 DOM에 추가되어 나타날 때 발생합니다.  마운트가 될 때 호출되는 메서드는 아래와 같습니다.

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

마운트 - constructor()

마운트가 시작될 때 컴포넌트의 생성자가 맨 처음 호출됩니다. 생성자에서는 state를 초기화하거나 이벤트 바인딩을 처리합니다. 생성자에서 setState()를 호출해서는 안되며 필요한 경우 state에 직접 할당해야 합니다. 생성자 외에 메서드에서는 setState()를 호출하여 state를 변경해야 합니다.

 

마운트 - getDerivedStateFromProps()

해당 v16.3부터 생긴 메서드입니다. 해당 메서드는 마운트, 업데이트가 발생할 때 모두 발생합니다. state를 갱신하기 위해 객체를 반환할 때 사용됩니다.

해당 메서드는 자주 쓰이지 않습니다. 해당 메서드는 좀 더 알아봐야 할 것 같습니다.

 

마운트 - render()

render() 메서드도 마운트, 업데이트에서 모두 발생합니다. 브라우저에 보일 화면을 구성합니다. render() 메서드는 props와 state를 활용하여 엘리먼트를 반환하거나 문자, 숫자 또는 null이나 boolean, 배열, Fragment, 다른 컴포넌트를 반환해야 합니다.  

render() 메서드에서 state가 변경되지 않아야 하며 브라우저와 상호작용하는 작업을 하지 않아야 합니다.  브라우저와 상호작용 해야 한다면 componentDidMount()에서 하거나 다른 생명주기 메서드에서 해야 합니다.

 

마운트 - componentDidMount()

컴포넌트가 마운트 된 후 호출되는 메서드입니다. DOM 노드가 만들어지고 필요한 작업이 있다면 해당 메서드에서 진행하면 됩니다. setInterval(), setTimeout(), 네트워크 요청 등

 

업데이트(갱신)

업데이트는 props, state가 변경될 때, 부모 컴포넌트가 리렌더링할 때와 this.forceUpdate로 강제로 리렌더링을 할 때 발생합니다. 업데이트가 발생할 때 호출되는 메서드는 아래와 같습니다.

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

업데이트 - getDerivedStateFromProps()

마운트, 업데이트가 발생할 때 호출됩니다. 위에 설명한 것과 같습니다.

 

업데이트 - sholudComponentUpdate()

props, state가 변경될 때 getDerivedStateFromProps() 메서드가 호출된 후 호출됩니다. 컴포넌트를 리렌더링 할지 여부를 지정합니다. 컴포넌트에 정의되어있지 않으면 기본값 true를 반환합니다. 해당 메서드에서 false를 반환하면 리렌더링이 되지 않고 중지됩니다.

 

리액트 문서에 따르면 성능 최적화를 위한 메서드라고 합니다. 자세한 참고사항은 리액트 문서를 참고하시기 바랍니다.

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

React.Component – React

 

업데이트 - render()

마운트에서 설명한 render() 메서드와 같습니다.

 

업데이트 - getSnapshotBeforeUpdate()

render() 메서드가 진행 후 호출되는 메서드입니다. 렌더링 결과가 DOM에 반영되기 전에 호출됩니다. 리렌더링이 끝나기 전에 DOM의 정보를 참조해야 할 때 사용할 수 있습니다.(스크롤 위치 작업등)

null 또는 값을 반환합니다.

 

업데이트 - componentDidUpdate()

리렌더링이 끝나면 호출됩니다. 컴포넌트가 업데이트되고 DOM을 조작하기 위해 메서드를 사용합니다. 메서드에서 인자로 이전 props, state를 사용할 수 있습니다. 세 번째 인자로 getSnapshotBeforeUpdate()에서 반환한 값이 snapshot 인자로 넘어옵니다.

 

언마운트(제거)

컴포넌트가 모두 사용이 끝나 DOM에서 제거될 때 발생합니다. 언마운트가 발생할 때 호출되는 메서드는 아래와 같습니다.

• componentWillUnmount()

언마운트 - componentWillUnmount()

컴포넌트가 제거되기 직전에 호출됩니다. 해당 메서드에서는 타이머를 제거하거나 componentDidMount() 메서드에서 생성되어 정리가 필요한 작업을 진행합니다.

참고

리액트를 다루는 기술(개정판) - 김민준 지음

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

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/