React 7 - Component Lifecycle

리액트의 컴포넌트는 생명주기 (Life Cycle)를 가진다. Lifecycle API는, 컴포넌트의 생성부터 소멸 사이의 여러 시점에서 호출될 수 있는 다양한 메소드를 말한다.

 

Mounting 관련 메소드

• constructor() : 컴포넌트 생성자 함수. 컴포넌트가 새로 만들어질 때마다 호출된다.
• componentWillMount() : 컴포넌트가 화면에 정의되기 직전에 호출되는 API. 현재는 잘 사용하지 않는다.
• componentDidMount() : 컴포넌트가 화면에 나타났을 때 호출되는 메소드로, render() 이후에 실행된다. 가장 많이 쓰이는 메소드로 주로 외부 라이브러리 연동, Ajax 나 mock data 요청 등에 사용된다. 요소 render 이후에 데이터를 fetch 하여 state값을 지정하는 용도로 가장 많이 사용하였다. this.setState 사용하여 state 값 지정 -> state값 변경 후 render가 재실행 된다.

Updating 관련 메소드

• static getDerivedStateFromProps() : 컴포넌트가 props로 받아온 값을 state로 동기화 하는 작업을 할 때 사용한다.
• componentDidUpdate() : componentDidMount는 초기 컴포넌트 실행시 한 번만 실행되기 때문에, 이후에 state값이 업데이트 됐을 경우에 실행하는 함수로 componentDidUpdate를 사용한다.

부모 - 자식 데이터 전달 시 가장 많이 발생하는 오류

컴포넌트 내부에서 불러오는 배열이 선언되기 전이라서 발생하는 오류로, 조건부 렌더링을 사용하여 해결할 수 있다.

 

조건부 렌더링 (&&)

특정 조건을 만족할 때 해당 JSX를 렌더링해주는 방법으로 아래와 같은 방법으로 사용한다.

render(){
	console.log("render");
    return (
    	<div>this.state.data[0].name : {this.state.data[0] && this.state.data[0].name} </div>
    );
}

{} 내부에서, this.state.data[0]이 true일 경우에만 (&&의 앞에 조건을 부여한다) 뒤의 내용을 렌더링해준다.

조건부 렌더링은 1) 데이터가 정의된 이후에 특정 요소를 보여주고 싶을 경우, 2) 특정 조건에 따라서 보여지는 컴포넌트가 있을 경우 (팝업창, 추가기입 창 등) 등의 상황에서 사용할 수 있다.

 

🙌componentDidUpdate()

이번 프로젝트에서 url이 변경됐을 때에 제품 데이터를 다시 받아오는 기능에서 사용하고 싶었지만 개념이 부족하여 사용하지 못했던 lifecycle 메소드.

 

보통 아래 코드와 같이 사용한다.

componentDidUpdate(prevProps, prevState) {
 if (this.props.userName !== prevProps.userName) {
   this.fetchData(this.props.userName);
 }
}

•  컴포넌트의 상태가 변경된 이후에 호출되는 메소드
• prevProps와 prevState는 이전의 상태값을 의미
• setState을 사용하여 현재 컴포넌트의 state를 업데이트할 수 있지만, if 조건 내부에 선언하지 않을 경우 무한 루프에 걸릴 수 있으므로 주의