컴포넌트의 생명주기
컴포넌트의 생성부터 소멸까지의 과정을 컴포넌트의 생명주기(Lifecycle)라고 부른다.
컴포넌트는 생명주기마다 함수를 가지고 있는데 이 함수들을 이용하면 특정 시점에 원하는 동작을 하도록 만들 수가 있다.
React lifecycle(생명주기)
컴포넌트의 생성부터 생성 완료까지 4개의 생명주기 함수가 호출 된다. 이과정을 생성 과정이라고 부르고
이후 생성 완료부터 갱신 완료까지 5개의 생명주기 함수가 호출된다. 이 과정을 갱신 과정이라고 부른다.
이때 갱신 과정은 shouldComponentUpdate()함수의 반환값에 따라서 true인 경우에 이후 과정이 진행이 되고
false인 경우에는 이후 과정이 모두 생략된다. 갱신 완료부터 소멸까지는 1개의 생명주기 함수가 호출되며,
이 과정을 소멸과정이라고 부른다.
constructor(props) 함수
constructor() 함수는 이름 그대로 ‘맨 처음에 생성될 때 한번만 호출'되며, 상태(state 또는 객체 변수)를 선언할 때 사용된다. constructor() 함수를 정의할 때는 항상 super() 함수를 가장 위에 호출해야한다. super() 함수에는 프로퍼티와 생명주기 상태 등을 초기화 하는 중요한 과정을 포함하고 있기 때문이다.
render() 함수
render() 함수는 데이터가 변경되어 새화면을 그려야 할 때 자동으로 호출되는 함수이다. 컴포넌트의 모양새를 정의한다. 그렇기 때문에 컴포넌트에서 가장 중요한 함수이고 Lifecycle에서 유일한 필수 함수이다. 이 함수안에서 this.props와 this.state에 접근할 수 있고, 리액트 요소를 반환한다. 요소는 div 같은 태그가 될수도 있고 따로 선언한 컴포넌트가 될수도 있다. 아무것도 보여주고 싶지 않으면 null값이나 false값을 반환하면 된다.
*주의 : 이 함수 안에서는 이벤트 설정이 아닌 곳에서 setState를 사용하면 안되고, 브라우저의 DOM에 접근해서도 안된다. DOM의 정보를 가져오거나 state에 변화를 줄때는 componentDidMount에서 처리해야 한다.
Static getDerivedStateFromProps(props,state) 함수
getDerivedStateFromProps()함수는 정적 함수이다. 따라서 함수 안에서 this.props나 this.state와 같은 방법으로 프로퍼티나 state값에 접근 할 수 없다. 만약에 각 값에 접근해야 하는 경우에는 반드시 인사로 전달된 props, state를 이용해야 한다. 이때 props는 상위 컴포넌트에서 전달된 값이고, state는 현재 컴포넌트의 state값이다. 이 함수는 상위 컴포넌트에서 전달받은 프로퍼티로 state값을 연동할 때 주로 사용하며, 반환값으로 state를 사용한다.
componentDidMount() 함수
componentDidMount() 함수는 render() 함수가 JSX를 화면에 UI를 그린 이후에 호출되는 함수 이다. 만약에 컴포넌트가 화면에 모두 표현된 이후 해야 하는 작업들은 이 함수에서 하면 된다. 또한 다른 자바스크림트의 라이브러리 또는 프레임워크의 함수를 호출하거나 이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기작업을 처리하면 된다.
shouldComponentUpdate(nextProps, nextState) 함수
shouldComponentUpdate() 함수는 프로퍼티를 변경하거나 setState() 함수를 호출하여 state값을 변경하면 ‘화면을 새로 출력해야 하는지' 판단하는 함수이다. 이 함수는 화면을 새로 출력할지 말지 판단하고, 데이터 변화를 비교하는 작업을 포함하므로 리액트 성능에 영향을 많이 준다. 화면 변경을 위해 검증 작업을 해야 하는 경우에 이 함수를 사용하면 된다. 이 함수는 반드시 true값 또는 false값을 반환해야 한다. 컴포넌트를 만들 때 이 함수를 따로 생성하지 않으면 기본적으로 언제나 true 값을 반환한다. 이 함수가 false값을 반환한다면 업데이트 과정은 여기서 중지된다.
getSnapshotBeforeUpdate(preProps, prevState) 함수
getSnapShotBeforeUpdate() 함수는 컴포넌트의 변경된 내용이 가상 화면에 완성된 이후 호출되는 함수이다. 이 함수는 컴포넌트가 화면에 실제로 출력되기 전에 호출하기때문에 화면에 출력될 앨리먼트의 크기 또는 스크롤 위치 등의 DOM 정보에 접근할때 사용된다.(주로 업데이트 하기 직전의 값을 참고할 일이 있을때 활용된다.)
componentDidUpdate(preProps, preState, snapshot) 함수
componentDidUpdate() 함수는 컴포넌트가 실제 화면에 출력된 이후 호출 되는 함수이다. 이 함수는 부모 컴포넌트로부터 전달된 이전 프로퍼티(preProps)와 이전 state값(preState)과 함께 getSnapshotBeforeUpdate() 함수에서 반환된 값(snapshot)을 인자로 전달 받는다. 이 값들을 이용하여 스크롤 위치를 옮기거나 커서를 이동시키는 등의 DOM 정보를 변경할 때 사용 된다.
componentWillUnmount() 함수
componentWillUnmount() 함수는 컴포넌트가 소멸되기 직전에 호출되는 함수이다. 보통 컴포넌트에서 감시하고 있는 작업들을 해제할 때 필요한 함수이다.(컴포넌트를 DOM에서 제거할때) 예를 들어서 컴포넌트에 setInterval()함수가 사용되었다면 이 함수에서 setInterval() 함수를 clearInterval() 함수로 해제해야한다. 이러한 해제 작업이 생량되면서 메모리 누수 현상이 발생하여 웹 브라우저의 작동이 멈추기도 한다.
