React 생명주기

React의 생명주기는 총 8종의 함수가 있다. 생명주기 함수는 개발자가 마음대로 호출할수 없고 리액트 엔진에서 자동으로 호출한다.

 

constructor(props) 함수

• 맨 처음에 생성될때 한번만 호출, 상태를 선언할 때 사용
• 생성자 함수를 정의할 때는 항상 super()함수를 가장 위에 호출
• constructor(props){ super(props); // 이후에 추가적인 state 데이터 혹은 변수 선언 }

render() 함수

• 데이터가 변경되어 새 화면을 그려 할 때 자동으로 호출하는 함수

static getDerivedStateFromProps(props, state) 함수

• 정적 함수
• this.props, this.state 같은 방법으로 프로퍼티나 state값에 접근 할 수 없다, 만약 접근해야하는 경우 반드시 인자로 전달된 props, state 이용 (props : 상위 컴포넌트에서 전달된 값, state : 현재 컴포넌트 값)

componentDidMount() 함수

• render() 함수가 JSX를 화면에 그린 이후에 호출되는 함수, 만약 컴포넌트가 화면에 모두 표현된 이후 해야하는 작업들은 여기서!

shouldComponentUpdate(nextProps, nextState) 함수

• 프로퍼티를 변경하거나 setState() 함수를 호출하여 state값을 변경하면 ‘화면을 새로 출력해야 하는지’ 판단하는 함수
• 화면을 새로 출력할지 말지 판단하며, 데이터 변화를 비교하는 작업을 포함하므로 리액트 성능에 영향을 많이 준다
• 주로 화면 변경을 위해 검증 작업을 해야 하는 경우 사용
• forceUpdate() 함수를 호출하여 화면을 출력하면 이 함수는 호출되지 않는다

getSnapshotBeforeUpdate(prevProps, prevState) 함수

• 컴포넌트의 변경된 내용이 가상 화면에 완성된 이후 호출되는 함수
• 컴포넌트가 화면에 실제로 출력되기 전에 호출되므로 화면에 호출될 엘리먼트의 크기 또는 스크롤 위치 등의 DOM 정보에 접근할때 사용

componentDidUpdate(prevProp, prevState, snapshot) 함수

• 컴포넌트가 실제 화면에 출력된 이후 호출되는 함수
• 부모 컴포넌트로부터 전달된 이전 프로퍼티(preProps)와 이전 state 값(prevState)과 함께 getSnapshotBeforeUpdate() 함수에서 반환된 값(snapshot)을 인자로 전달받는다. 이 값들을 이용하여 스크롤 위치, 커서 이동 등 DOM 정보를 변경할 때 사용

componentWillUnmount() 함수

• 컴포넌트가 소멸되기 직전에 호출되는 함수
• 보통 컴포넌트에서 감시하고 있는 작업들을 해제할 때 필요한 함수
• 예를 들어 컴포넌트에 setInterval() 함수가 사용되었다면 이 함수에서 setIntervalu()함수를 clearInterval() 함수로 해제해야 한다. 이러한 해체 작업이 생략되면 메모리 누수 현상이 발생하여 웹 브라우저의 작동이 멈추기도 한다.