[React] (5) 컴포넌트의 생명주기

geonhee1492·2022년 5월 25일
0

리액트 공부일지

목록 보기
5/7

이 글은 <Do it! 리액트 프로그래밍 정석>을 참고하여 작성하였습니다.정리 느낌으로 작성하였으므로 내용이 정확하지 않고 구체적이지 않을 수 있습니다.

이번엔 이론이 길다..

생명주기 함수 살펴보기

생명주기(Lifecycle): 컴포넌트의 생성부터 소멸까지의 과정
생명주기 함수는 8종이 있음. 리액트 엔진이 자동으로 호출.즉, 개발자가 마음대로 호출할 수 없음.
생성 과정 4개,갱신 과정 5개,소멸과정 1개 호출됨

1.constructor(props) 함수
맨 처음 생성될 때 한 번만 호출,상태(state 또는 객체 변수)를 선언할 때 사용.항상 super() 함수를 가장 위에 호출해야 함.super()는 프로퍼티와 생명 주기 상태 등을 초기화하는 과정을 포함하고 있음.

2.render() 함수
데이터가 변경되어 새 화면을 그려야 할 때 자동으로 호출되는 함수. JSX 그려줌

3.static getDerivedStateFromProps(props, state) 함수
getDerivedStateFromProps() 함수는 정적 함수. 따라서 함수 안에서 this.props나 this.state와 같은 방법으로 프로퍼티나 state값에 접근할 수 없음.(정적 메서드니까 인스턴스 x)인자 이용해야함.이 함수는 전달받은 프로퍼티로 state값을 연동할 때 주로 사용.반환값으로 state를 변경함.

4.componentDidMount() 함수
render()가 JSX를 화면에 그린 이후에 호출되는 함수.
컴포넌트가 화면에 모두 그려진 이후 해야하는 작업들은 여기에서 한다.

5.shouldComponentUpdate(nextProps, nextState) 함수
프로퍼티 변경,setState() 함수를 호출하여 state값을 변경하면 '화면을 새로 출력해야 하는지' 판단하는 함수.데이터 변화를 비교하는 작업을 포함하므로 !!리액트 성능에 영향을 많이 준다.!! 화면 변경을 위해 검증 작업을 해야 하는 경우 사용

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

7.componentDidUpdate(prevProps, prevState, snapshot) 함수
컴포넌트가 실제 화면에 출력된 이후 호출되는 함수.
이전 프로퍼티(prevProps)와 이전 state값(prevState)과 함께 getSnapshotBeforeUpdate() 함수에서 반환된 값(snapshot)을 인자로 받음. 스크롤 위치를 옮기거나 커서를 이동시키는 등의 DOM 정보를 변경할 때 사용.

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

생명주기 함수의 실행 과정 살펴보기

생성 과정

맨 처음 index.js 실행
index.js의 ReactDOM.render() 함수가 실행되면 App 컴포넌트의 최초 생명주기 함수인 constructor()가 실행. 그 다음 App의 자식 컴포넌트도 독립적인 생명주기 가짐.

생성 과정
constructor -> getDerivedStateFromProp -> render -> componentDidMount -> 생성 완료

카운터 프로그램 만들며 생명주기 함수 쓰기

부모 컴포넌트로부터 count의 초깃값을 전달받아 숫자를 증가하는 카운터 프로그램.getDerivedStateFromProps() 함수의 동작 원리도 알아보기 위해 2개의 컴포넌트를 만들어 state에 저장되는 값을 변경하자.

Counter 컴포넌트 작성


이 Counter 컴포넌트는 생성 과정만 구현했기 때문에 갱신이 안됨

프로퍼티 초깃값은 state.count에 저장, state.newCount로 증가값을 따로 분리하여 관리.분리한 이유는 getDerivedStateFromProps() 함수는 다른 프로퍼티가 변경되어도 호출되기 때문.변경된 프로퍼티가 count인지 비교하려면 따로 관리해야함

+ 처음에 카운트 증가를 눌러도 자꾸 1111로 떠서 왜지 했는데 프로퍼티가 문자열로 전달되고 있었다.객체로 전달되어야 한다.


Counter는 초기화 x,NewCounter 컴포넌트만 getDerivedStateFromProps() 함수로 갱신된 프로퍼티를 동기화했기 때문. Counter 컴포넌트는 처음 생성될 때만 프로퍼티값으로 state값을 설정하므로 갱신 과정에서 state값이 변경되지 않는다.

profile
생각만 하면 망상, 만들면 개발자.

0개의 댓글