Life cycle & 조건부 랜더링

Jetom·2021년 10월 6일
0

개념정리(react)

목록 보기
9/17
post-thumbnail

드뎌 1차 프로젝트가 시작되면서 힘들게 힘들게 써가는 블로그... 나 자신 한번 더 빡세게 화이팅~~~ 🙄

Life cycle

Life cycle(= 라이프 사이클)은 생애 주기를 가리키는 말이다! 그렇다면 react에서 라이프 사이클이란 뭘까? react에서의 라이프 사이클은 component가 초기 렌더링될 때, 리 렌더링 될 때, 사라질 때를 말한다. (쉽게 말해 태어나고 업데이트되고 죽고! 라는 소리) 그래서 나랑 뭔 상관이야..? 🙄라고 생각 할 수 있지만, 이 라이프 사이클을 알아야 내가 원하는 결과물을 얻을 수 있기 때문에 특정 생애주기 즉 라이프 사이클 메서드에 대해 알고 있어야 한다.

👉 글로 보는것보다 직접 보면서 알고싶다면? React life cycle site

life cycle의 순서

라이프 사이클의 순서는 아래와 같다.

  1. constructor
  2. render
  3. componentDidMount
  4. fetch 완료
  5. setState
  6. render
  7. componentDidUpdate (setState로 인한 업데이트 발생)
  8. componentWillUnmount

👉 각각 정리한 내용은 라이프 사이클 순서를 참고해주세요


조건부 렌더링

react에서 map 함수를 쓰면 나오는 TypeError... 저에겐 너무 친숙한 이 에러를 한 번쯤은 마주쳤을 텐데.. 이 아이는 왜! 대체 왜?! 나오는 걸까?

//에러가 나는 코드!
import React, { Component } from "react";

export default class FetchError extends Component {
  constructor() {
    super();
    this.state = {
      data: {},
    };
  }

  componentDidMount() {
    fetch("/lifecycle.json")
      .then((res) => res.json())
      .then((res) => {
        this.setState({ data: res });
      });
  }

  render() {
    return (
      <div>
        {this.state.data.message.map((msg) => {
          return <li>{msg}</li>;
        })}
      </div>
    );
  }
}

메시지를 읽어보면 undefined를 map 함수로 돌리려 했다고 한다. 하지만 분명 나는 배열 안에 넣었는데..?🤔 왜 이런 현상이 나오는 걸까? 바로 react의 라이프사이클과 관련이 있다!

결과를 바로 말하자면 componentDidMount 안 fetch 함수를 기준으로, 한번은 fetch 함수 실행 전에 render 함수가 실행되고, 나머지 한번은 fetch 함수 실행 후에 호출이 되기때문이다.

👇 다시 한번 보는 라이프사이클 메서드 호출 순서

  1. constructor
  2. render
  3. componentDidMount (fetch 👉 setState)
  4. render
  5. componentDidUpdate

render 메서드에 있는 state는 첫 번째 렌더에서 초기값인 빈 객체를 가지고 두 번째에서는 빈 객체에 서버에서 받아온 배열이 들어오게 된다. 이때 첫 번째 렌더는 서버에서 값을 받아오기 전이므로 배열이 아닌 객체 타입에 map 함수를 실행시키기 때문에 타입 에러를 발생시킨것이다!(🚨 잡았다 요놈)

따라서 조건을 통해 state 안에 데이터가 저장되어 있지 않다면 렌더링 되지 않도록 코드를 작성해주면된다.

삼항 연산자와 &&연산자

js에서 본 삼항 연산자와 &&연산자! 지겹고 지겹지만 react에서 조건부 렌더링을 구현하기 위해 사용할 수 있다. 삼항 연산자는 true / false에 따른 ui를 렌더링 할 수 있고, &&의 경우 조건이 모두 true 일 때 특정 ui를 렌더링 할 때 사용한다.

//삼항 연산자로 본 예제 코드

class Greetin extends Component {
   render() {
	const { isLogin, name, point } = this.props;

	return {
	    <div>
		{isLogin ? (
		    <div>
			<p>{name}님 환영합니다!</p>
			<p>현재 보유중인 포인트는 {point}원 입니다.</p>
		   </div>
		) : null}
	     </div>
     }
  }
}

삼항 연산자는 무조건 true / false의 값을 써야하기 때문에 null이 들어가지만 아래 코드와 같이 &&를 활용하면 null을 생략함과 동시에 코드가 짧아져서 훨씬 보기가 좋아지는 것을 볼 수 있다.

//&&연산자
class Greetin extends Component {
   render() {
	const { isLogin, name, point } = this.props;

	return {
	    <div>
		{isLogin && (
		    <div>
			<p>{name}님 환영합니다!</p>
			<p>현재 보유중인 포인트는 {point}원 입니다.</p>
		   </div>
		)}
	     </div>
     }
  }
}
profile
사람이 좋은 인간 리트리버 신혜리입니다🐶

0개의 댓글