[TIL-42] React-리렌더링, 조건부 렌더링

리렌더링

함수형 컴포넌트 렌더링 과정

1. 컴포넌트가 렌더링 된다. mount 라고 한다.
2. useEffect의 첫번째 인자로 넘겨준 콜백함수가 실행된다. (side Effect)
3. 다시 렌더링(re-render) : state, props 등이 변경된 경우
4. useEffect의 두번째 인자인 의존성 배열을 확인
5. 두번째 인자 없음 / 의존성 배열에 들어있는 값 중 변한게 하나라도 있다 : 콜백함수 실행(side Effect)
6. 앞의 effect에서 state나 props가 변경시킨 값이 있으면 다시 렌더링
   반복
7. 컴포넌트가 필요없어짐 → 화면에서 사라진다. unmount라고 한다.

부모 컴포넌트 -자식 컴포넌트 렌더링 과정

//Parent.js
import React, { useState, useEffect } from "react";
import Child from "./Child";

function Parent() {
  const [data, setdata] = useState([]);

  //8. 부모 처음 렌더링 후 한 번만 실행
  useEffect(() => {
    //여기 콘솔 출력 후 ↓
    console.log("부모 컴포넌트 마운트 후");
	//fetch()실행!
    fetch("url")
      .then((res) => res.json())
      .then((res) => {
        console.log("부모 컴포넌트 fetch 완료");

        //다시 렌더링(data의 상태 변함)
        setdata(res.data);
      });

    return () => {
      // clean up 함수
      // unmount 될 때
    };
  }, []);

  //9. 부모 컴포넌트가 렌더링 될 때마다 실행
  useEffect(() => {
    console.log("부모 컴포넌트 (리)렌더링 후");
  });

  console.log("부모 컴포넌트 (리)렌더링 전"); //1 : side Effect, 렌더링 전에 먼저 실행된다.

  // 2. 부모 컴포넌트 렌더링
  return (
    <>
      <h1>Parent</h1>
      //3. 부모 컴포넌트 렌더링 중 자식 컴포넌트를 그린다.
      <Child childData={data} />
    </>
  );
}

export default Parent;

//Child.js
import React, { useState, useEffect } from "react";

function Child(props) {
  // 6. 자식 컴포넌트가 맨 처음 렌더링 된 후에 한 번만 실행
  useEffect(() => {
    console.log("자식 컴포넌트 마운트 후"); 
  }, []);

  //7. 자식 컴포넌트 렌더링 할 때마다 실행
  useEffect(() => {
    console.log("자식 컴포넌트 (리)렌더링 후"); 
  });
  
  //4. 자식 컴포넌트 렌더링 전에 side Effect 실행
  console.log("자식 컴포넌트 (리)렌더링 전"); 

  //5. 자식 컴포넌트 렌더링
  return <h1>Child is here!!</h1>;
}

export default Child;

1. 부모 렌더링 전에 부모의 side Effect 실행
2. 부모 렌더링 하는 중에 자식 컴포넌트 그리기
3. 자식 렌더링 전 자식의 side Effect 실행
4. 자식 컴포넌트 렌더링
5. 자식 컴포넌트 맨 처음 렌더링 된 후 [ ] useEffect 실행
6. 자식 컴포넌트 렌더링 될 때마다 useEffect실행
7. 부모 처음 렌더링 후에 [ ] useEffect 실행 → fetch()로 데이터 가져옴 → data 값 바뀜
   ⇒ 다시 부모 컴포넌트 렌더링..
   ⇒ 이때 fetch()는 느리게 실행 될 수 있다! 비동기 함수이기 때문이다.
8. 부모 렌더링 전에 부모의 side Effect 실행
9. 부모 렌더링
10. 자식 컴포넌트 그리기
11. 자식 렌더링 전 자식의 side Effect 실행
12. 자식컴포넌트 렌더링 될 때마다 useEffect실행 ([ ]은 맨 처음 렌더링에서만 실행)
13. 부모 렌더링 할 때마다 useEffect 실행([ ]은 맨 처음 렌더링에서만 실행)

👪핵심 : 부모 컴포넌트가 렌더링하면 자식 컴포넌트로 렌더링한다!

조건부 렌더링

• 특정 값에 따라 선택적으로 렌더링 한다.

삼항연산자

• true, false일 때 사용
• 예시) 데이터가 있으면 ? 컴포넌트 그리기 : “데이터가 없습니다”출력
• 삼항 연산자를 사용할 때는 false일 때 실행할 로직이 반드시 있어야 한다.

&&

• 조건이 true일 때만
• 예시) 데이터를 반드시 보여주어야 하는 화면 - 신상품 소개 페이지 등
  → 데이터 && 화면 보여주기
• && 연산자는 true일 때만 렌더링 하겠다는 의미이다.
• 변수가 숫자인 경우 0은 false이다.
• 변수가 문자열인 경우 ""(빈 문자열)은 false이다.

  • true로 인정되는 것들(Truethy) : 0을 제외한 정수, true, 값이 있는 문자열, {}, []
  • false로 인정되는 것들(falsy) : 0, undefined, 값이 할당되지 않은 변수(undefined), 빈문자열(’’),null, NaN

useEffect 관련 에러는 Hook의 순서때문에 발생하는 경우가 많다고 한다. 코드를 짤 때 렌더링 순서에 신경써야겠다는 생각이 들었다.