[26.02.03] React 재직자 교육 5 -Reredering 컴포넌트 리렌더링

리렌더링(Rerendering)은

 

 사용자 화면의 데이터나 상태가 변경되어 UI를 새롭게 그리는 과정을 말하며, 주로 React와 같은 프레임워크에서 컴포넌트의 state(상태)나 props(속성)가 변경될 때, 또는 부모 컴포넌트가 다시 렌더링될 때 발생하며, 화면 변화를 위해 필수적이지만 불필요하게 자주 일어나면 성능 저하의 원인이 되므로 메모이제이션(Memoization) 같은 최적화 기술이 중요합니다.

 

콘솔에 로그가 두번 찍힌다

랜더링이 왜 두번되나요?

 

[람다가 두번실행되는이유]

reactStrictMode=true (기본)

- 개발모드에서컴포넌트를2번실행되도록의도된것

- 잠재적인문제가있는지확인하기위해2번실행

- 2번 실행해서결과가달라지면문제있는컴포넌트

- 실행은2번, 렌더링은 1번- 프로적션모드에서는1번만실행
next.config.mjs------------------
const nextConfig = {
reactStrictMode: false
};

 

리액트 스트릭트 모드를 false로 하면 한번만 실행이 된다.

 

 

 

함수의 결과를 상태로 줄때에는 함수 참조만 넣자

1) useState(initBoardList();) ->계속 함수 호출함

2) useState(initBoardList) => 한번만 호출 

 

 

1)

 

 

2)

 

 

자식이 부모의 props로 받은 값을 바꾸고 싶다!!

부모 컴포넌트가 리랜더링 되면 자식도 당연히 리랜더링 된다.

 

자식인 childComponent에서 버튼을 클릭함

부모 함수 호출로 부모의 상태를 변경함

바꾼값을 다시 자식이 받아서 바꿈

그냥 쌩으로 부모걸 자식이 바꿀수는 없음

"use client"

import { useState } from "react";
import ChildComponent from "./ChildComponent";
import Image from "next/image";

function Exam04StateToProp() {
  const [imgFile, setImgFile] = useState("photo1.jpg"); //자식이 부모의 상태변수 바꿈 -> 리랜더링
  
  //함수를 자식에게 전달
  const changeImg = () => { //토글기능
    if(imgFile === "photo1.jpg") {
      setImgFile("photo2.jpg");
    } else {
      setImgFile("photo1.jpg");
    }
  };

  return (
    <div className="card">
      <div className="card-header">Exam04StateToProp</div>
      <div className="card-body">
        <div className="mb-2">
          {/* Node.js 환경에서 실행할 경우: 이미지 최적화 기능 적용 */}
          {/* 이미지 최적화 기능: 크기 조절, 포맷 변환, 지연 로딩, 자동 캐싱등을 말함 */}
          {/* public/*는 빌드 후 .next/images/* 폴더에 저장 */}
          {/* <Image src={`/images/${imgFile}`} alt="" width="150" height="100"/> */}

          {/* 정적 내보내기를 할 경우 사용 */}
          {/* 이미지 최적화 기능 사용 안함 */}
          {/* public/*는 빌드 후 out/* 폴더로 저장 */}
          <img src={`/images/${imgFile}`} alt="" width="150" height="100"/>
        </div>
        <ChildComponent imgFile={imgFile} changeImg={changeImg}/> 
      </div>
    </div>
  );
}

export default Exam04StateToProp;

 

"use client"

import Image from "next/image";

function ChildComponent({
  imgFile, //props로 값을 받음
  changeImg //부모에게서 상태를 바꾸는 함수를 전달받음 -> 버튼으로 부모한테 상태 바꿔달라고 요청함
}) {
  return (
    <div className="card">
      <div className="card-header">ChildComponent</div>
      <div className="card-body">
        <button className="btn btn-info btn-sm" onClick={changeImg}>이미지 변경</button>
        <div className="mt-2">
          {/* <Image src={`/images/${imgFile}`} alt="" width="150" height="100"/> */}
          <img src={`/images/${imgFile}`} alt="" width="150" height="100"/>
        </div>
      </div>
    </div>
  );
}

export default ChildComponent;