Creating an optimized production build...
/var/www/web/node_modules/react-scripts/scripts/build.js:19
  throw err;
  ^

RpcIpcMessagePortClosedError: Process 33108 exited [SIGKILL].
    at /var/www/web/node_modules/fork-ts-checker-webpack-plugin/lib/rpc/rpc-ipc/RpcIpcMessagePort.js:19:23
    at Generator.next (<anonymous>)
    at /var/www/web/node_modules/fork-ts-checker-webpack-plugin/lib/rpc/rpc-ipc/RpcIpcMessagePort.js:8:71
    at new Promise (<anonymous>)
    at __awaiter (/var/www/web/node_modules/fork-ts-checker-webpack-plugin/lib/rpc/rpc-ipc/RpcIpcMessagePort.js:4:12)
    at ChildProcess.handleExit (/var/www/web/node_modules/fork-ts-checker-webpack-plugin/lib/rpc/rpc-ipc/RpcIpcMessagePort.js:18:42)
    at ChildProcess.emit (node:events:518:28)
    at ChildProcess._handle.onexit (node:internal/child_process:293:12) {
  code: null,
  signal: 'SIGKILL'
}

이 오류 메시지의 핵심은 SIGKILL 신호입니다. SIGKILL은 시스템이 프로세스를 강제로 종료할 때 발생하는 신호로, 다양한 원인이 있지만 위 상황에서는 주로 리소스 부족으로 인해 발생합니다. 클라우드 환경은 로컬 개발 환경에 비해 제한된 리소스를 사용하는데 이로 인하여 발생하는 경우가 많습니다.

React 빌드 오류 원인 분석

오류 메시지에서 fork-ts-checker-webpack-plugin/.../RpcIpcMessagePort.js:19:23 부분에 에러가 발생한 것을 볼 수 있습니다. 이러한 이유 때문에 fork-ts-checker-webpack-plugin 문제로 보고 설치 버전을 변경하거나 설정을 수정하는 경우가 많습니다. 하지만 실제로 해당 코드에서 문제가 발생하는 것이 아니라 프로세스가 비정상 종료되어 발생하는 문제입니다.

해당 위치의 코드는 아래와 같은데 프로세스가 종료될 때 실행되며, 오류를 처리하고 있는 코드입니다.

const handleExit = (code, signal) => __awaiter(this, void 0, void 0, function* () {
    closedError = new RpcIpcMessagePortClosedError_1.RpcIpcMessagePortClosedError(code
        ? `Process ${process.pid} exited with code "${code}" [${signal}]`
        : `Process ${process.pid} exited [${signal}].`, code, signal);
    errorListeners.forEach((listener) => {
        if (closedError) {
            listener(closedError);
        }
    });
    yield port.close();
});

해결 방법

이 문제를 해결하기 위해 다음과 같은 방법을 고려해볼 수 있습니다.

1. 서버 메모리 증가: 클라우드 서버의 메모리가 부족해서 빌드 프로세스가 종료되었을 가능성이 큽니다. 따라서 서버의 메모리를 늘려서 빌드하는 것이 가장 직관적인 해결책입니다
2. Docker 리소스 설정: Docker 환경에서 빌드를 진행 중이라면, Docker에 할당된 메모리와 CPU 자원을 충분히 확보해야 합니다. Docker의 기본 리소스 설정이 낮게 설정되어 있을 경우, 빌드 도중 메모리 부족으로 프로세스가 종료될 수 있습니다.
3. 스왑 메모리 설정: 클라우드 서버에서 물리 메모리가 부족할 경우 스왑 메모리를 설정하여 메모리 부족 문제를 완화할 수 있습니다. 다만 스왑은 성능이 떨어질 수 있으므로 가능한 한 물리 메모리를 확보하는 것이 좋습니다.

결론

이 오류는 클라우드 서버의 리소스가 부족할 때 발생하는 경우가 많습니다. 문제 해결을 위해서는 서버의 메모리를 늘리거나, Docker 리소스를 조정하는 등의 방법을 통해 해결할 수 있습니다. 로컬 환경에서는 잘 동작하지만 클라우드 환경에서 문제가 발생한다면, 리소스 제한이 원인일 가능성을 항상 염두에 두어야 합니다.

참고 자료

KendoReact License 적용 방법에 대해서 알아보도록 하겠습니다. KendoReact는 상용 라이선스로 개인/무제한 라이선스입니다. 구입 한 시점 ~ 1년 이내 버전에 대해서는 무제한으로 사용할 수 있습니다. 따라서 최신 버전의 KendoReact를 사용하기 위해서는 라이선스를 지속적으로 구매해야 하며, 이 경우 아래와 같이 할인이 적용됩니다.

KendoReact를 사용하기 위해서는 KendoReact 라이선스나 React, Angular, Vue, jQuery를 사용할 수 있는 Kendo UI 라이선스를 구매해야 합니다. 해당 라이선스를 구매하지 않는다면 사용하는 데 큰 문제는 없으나 아래 그림과 같이 라이선스가 유효하지 않다는 워터마크가 화면에 출력됩니다.

KendoReact License 구매와 관련해서 Pricing 페이지를 참고하시길 바랍니다.

KendoReact Trial License

KendoReact 홈페이지 가입하면 30일 동안 유효한 라이선스를 사용할 수 있습니다. 로그인 후 Account View 페이지에서 Trials를 클릭하고 KendoReact 또는 Kendo UI 라이선스를 활성화 하면 됩니다.

다시 Trials 메뉴에 들어가면 아래와 같이 KendoReact Trial License가 활성화 된 것을 확인할 수 있습니다.

License 활성화 하기

DOCS & DEMOS 메뉴 하위에 Project Setup 페이지에서 라이선스 파일을 다운로드 받을 수 있습니다.

다운로드 받은 License 파일을 프로젝트 루트 폴더에 kendo-ui-license.txt 파일로 복사합니다. 그리고 License를 활성화 합니다.

## license 모듈 설치
npm install --save @progress/kendo-licensing

## license 활성화
npx kendo-ui-license activate

마치며..

KendoReact 라이선스에 대해서 알아보았습니다. Trial 기간 동안 충분히 사용해보고 구매를 선택하는 것도 나쁘지 않는 선택인 것 같습니다.

이번 포스팅에서는 GitHub Copilot 가입 후 GitHub Copilot IntelliJ에서 사용해보겠습니다.

GitHub Copilot 가입

Copilot Pro( or Individual) 요금제 가입 해보겠습니다. 해당 요금제는 한달 무료이며, 요금이 과금되기 전에 GitHub Copilot을 해지할 수 있습니다.

GitHub 로그인 후 [Profile] > [Settings] 메뉴를 클릭하고, 왼쪽 메뉴에서 [Copilot] 메뉴를 클릭합니다. 이후 [Start free trial] 버튼을 누르고, 결제 정보를 입력하면 GitHub Copilot을 시작할 수 있습니다.

Copilot 정책(policies)

결제 정보를 다 입력하면 Copilot 정책을 설정할 수 있습니다. 여기서 체크할 수 있는 항목은 아래와 같이 2개 항목이 있습니다.

첫번째는 공개 코드와 일치하는 제안을 허용하거나 차단할 수 있습니다. 공용 코드와 일치하는 제안을 차단하도록 선택하는 경우 GitHub Copilot은(는) GitHub의 공용 코드에 대해 약 150자의 주변 코드가 포함된 코드 완성 제안을 확인합니다.

두번째는 GitHub에서 내 코드 조각을 수집 여부를 설정할 수 있습니다. 코드 조각은 GitHub 및 계열사, 그리고 제 3자가 코드 조각을 연구, 학습, 개선하는데 사용합니다.

GitHub Copilot IntelliJ 연동

IntelliJ에서 GitHub Copilot를 사용하려면 GitHub Copilot Plugin을 설치해야 합니다. [Settings] > [Plugins…] 메뉴를 클릭하고, GitHub Copilot 플러그인을 설치합니다. 설치 완료 후 IDE를 재시작 합니다.

GitHub Copilot에 접근하기 위해 GitHub에 로그인을 합니다.

[Copy and Open] 버튼을 누르면 GitHub 창으로 이동합니다. 이후 GitHub에 로그인 후 Device Code를 입력하고, 인증을 마무리 합니다.

GitHub Copilot IntelliJ 사용하기

먼저 코드 추천을 활성화 합니다.

사용법은 아주 간단하고, 또 아주 효과적입니다.

자동 완성의 경우 주석을 작성하거나 코드 일부를 작성하면 그에 맞는 코드를 추천해주는데, 의미론적으로 코드를 분석하여 추천해주기 때문에 생각보다 꽤 정확합니다.

또 아래와 같이 프롬프트를 통해서 코드를 작성할 수 있습니다.

마지막으로 GitHub Copilot Chat 기능을 통해서 현재 파일/프로젝트를 기반으로 explain, fix, simplify 등 미리 정의된 명령어 뿐만 아니라 다양한 질문을 할 수 있습니다.

마치며

GitHub Copilot IntelliJ에 대해서 알아보았습니다. 사실 처음에 쓰기 전에는 반신반의 하면서 사용했는데, 자동 완성 기능이 생각보다 매우 정교해서 코딩하는 데 꽤 많은 시간이 단축되었습니다.

물론 제안하는 코드가 다 맞는 것은 아니기에 반드시 해당 코드가 맞는지 확인이 필요합니다.

참고 자료

지원 버전

KendoReact 지원 사양은 다음과 같습니다 :

• React 18 버전 권고 ( 16.8.x 이상 지원 )
• NodeJS 18.17.1 버전 권고 ( 14 이상 지원 )

만약 새롭게 KendoReact 앱을 개발한다면 React 18 버전에 NodeJS LTS 버전을 추천합니다. 저는 React 18 버전 및 NodeJS 20.17.0 버전을 사용하겠습니다. ( 24년 09월 기준 )

KendoReact 앱 생성

KendoReact 앱 생성하기

KendoReact 앱은 create-kendoreact-app 도구를 사용하여 쉽고 빠르게 KendoReact 앱을 생성할 수 있습니다. 앱 생성에 필요한 정보를 입력하면 자동으로 KendoReact 앱을 생성합니다. :

• 프로젝트 이름
• TypeScript 사용 여부
• SASS 사용 여부
• Kendo UI 테마 선택 ( default, bootstrap, material )

create-kendoreact-app 도구를 통해서 앱을 생성해보겠습니다.

npx create-kendoreact-app
? What is the name of your project? my-first-app
? Do you want to use TypeScript? Yes
? Do you want to use SASS? Yes
? Which Kendo UI Theme do you want to use? default

또는 다음과 같이 한번에 입력해도 됩니다.

npx create-kendoreact-app my-frist-app --typescript --sass --theme=default

아래 그림과 같이 my-first-app 폴더를 생성 후 필요한 패키지를 설치합니다.

KendoReact 앱 실행하기

이제 KendoReact 앱이 정상적으로 생성되었고 실행되는지 확인해보겠습니다.

cd my-first-app
npm start

다음과 같이 브라우저에서 http://localhost:3000/ 접속 시 아래와 같이 표시되면 정상적으로 KendoReact 앱이 생성된 것입니다.

기존 프로젝트에 KendoReact 사용하기

기존 프로젝트에서 KendoReact를 사용하기 위해서는 필요한 컴포넌트를 설치하거나 전체 컴포넌트를 미리 설치하여 사용할 수 있습니다.

필요한 컴포넌트 추가하기

KendoReact 공식 사이트에서 문서 및 데모 페이지에서 각 컴포넌트에 대한 자세한 설명과 데모 그리고 필요한 패키지를 잘 기술하고 있습니다. 해당 패키지를 설치하고 사용하면 됩니다.

예를 들어 Data Grid를 사용하고 싶으면 Data Grid Overview 페이지에 가면 필요한 패키지를 확인할 수 있습니다.

# Data Grid 설치하기
npm i @progress/kendo-react-grid

모든 컴포넌트 추가하기

KendoReact의 모든 컴포넌트를 추가히기 위해서는 모든 패키지를 수동으로 설치하거나 KendoReact 앱을 만들고 해당 프로젝트에서 package.json에 있는 @progress로 시작하는 모든 패키지를 복사, 기존 package.json에 추가하고 패키지를 업데이트하는 방법이 있습니다.

사용법

Data Grid를 예제로 간단하게 사용법에 대해서 알아보겠습니다.

Data Grid를 사용하기 위해서는 @progress/kendo-react-grid를 import 해야 합니다.

그리고 도움말을 참고해서 Grid를 생성하고 데이터를 바인딩하면 됩니다.

import React from "react";
import "./App.scss";

import { Grid, GridColumn } from "@progress/kendo-react-grid";

const products = [
  {
    ProductID: 1,
    ProductName: "Tea",
    CategoryID: 1,
    QuantityPerUnit: "10 boxes x 20 bags",
    UnitPrice: 18.0,
    UnitsInStock: 39,
    Discontinued: false,
  },
  {
    ProductID: 7,
    ProductName: "Dried Pears",
    CategoryID: 7,
    QuantityPerUnit: "12 - 1 lb pkgs.",
    UnitPrice: 30.0,
    UnitsInStock: 15,
    Discontinued: false,
  },
];

function App() {
  return (
    <div className="App">
      <Grid data={products}>
        <GridColumn field="ProductName" />
        <GridColumn field="UnitPrice" />
        <GridColumn field="UnitsInStock" />
        <GridColumn field="Discontinued" />
      </Grid>
    </div>
  );
}

export default App;

마치며

간단하게 KendoReact 앱을 생성해보았습니다. 이제 KendoReact UI Component를 사용하여 쉽고 빠르게 React 앱을 만들어보시기 바랍니다.

참고 자료

KendoReact는 입력 폼, 데이터 그리드, 차트, 텍스트 편집기와 같이 비즈니스 애플리케이션에서 필요한 다양한 UI 컴포넌트를 제공합니다. 또한 KendoReact는 Kendo UI에서 제공하는 기본 테마뿐만 아니라 Material, Bootstrap, Fluent와 같이 다양한 테마를 제공합니다. 그리고 사용자가 간단하게 테마를 변경할 수 있도록 도구를 제공합니다.

이러한 컴포넌트를 사용하여 쉽고 빠르게 UI 개발을 할 수 있습니다.

KendoReact 소개

KendoReact는 Fiddler로 유명한 Telerik 社에서 제공하는 UI 컴포넌트 라이브러리 중 하나로 React를 사용하여 비즈니스 애플리케이션을 빠르게 개발하기 위해 설계된 UI 라이브러리입니다.

KendoReact는 입력 폼, 데이터 그리드, 차트, 텍스트 편집기와 같이 비즈니스 애플리케이션에서 필요한 다양한 UI 컴포넌트를 제공합니다. 또한 KendoReact는 디자인과 관련하여 Kendo UI에서 제공하는 기본 테마뿐만 아니라 Material, Bootstrap, Fluent와 같이 다양한 테마를 제공합니다. 그리고 사용자가 간단하게 테마를 변경할 수 있도록 도구를 제공합니다.

이러한 컴포넌트를 사용하여 쉽고 빠르게 UI 개발을 할 수 있습니다.

보다 자세한 소개는 KendoReact 홈페이지를 참고하시기 바랍니다.

KendoReact 가격 정보

KendoReact를 사용할 수 있는 버전은 크게 3개 버전이 있습니다.

• KendoReact : React 사용 가능
• Kendo UI : React, jQuery, Angular, Vue 사용 가능
• DevCraft Complete : React, jQuery, Angular, Vue 이외에도 .Net Framework 등에서 사용 가능

KendoReact에서도 지원 형태에 따라서 가격 정보다 다릅니다.

• Lite Support : $899 (72h response time, 10 support incidents)
• Priority Support : $999 (24h response time, Unlimited number of support incidents)
• Ultimate Support : $1,399 (24h response time, Unlimited number of support incidents, etc)

KendoReact 라이선스 구매 시 1년동안 유효(최신 버전 다운로드 및 지원)하며, 사이트 제한은 없습니다. 유효기간이 만료되어도 유효기간 내에 릴리스된 버전은 사용할 수 있으며, 유효기간 만료 이후에 릴리스된 버전은 사용할 수 없습니다.

KendoReact 주요 특징

다른 UI 프레임워크가 모바일 중심으로 되어 있다면 KendoReact 컴포넌트는 데이터를 기반으로한 비즈니스 애플리케이션에 최적화된 컴포넌트를 제공합니다. 다만 비즈니스 애플리케이션 용도로 나와 있다보니 무료 버전은 존재하지 않으며 무조건 라이선스를 구입해서 사용해야합니다.

또한 다른 컴포넌트에 비해 데모와 문서화가 잘 되어 있어, 초보자도 쉽게 사용할 수 있습니다.

마치며

KendoReact에 대해서 간단하게 알아보았습니다. 앞으로 KendoReact 관련 포스트에서는 공식 사이트에서 제공하는 데모를 중심으로 실제 개발하면서 사용한 다양한 방식에 대해서 예제 형식으로 자세히 다뤄보겠습니다.

React 리렌더링 발생 조건

React 리렌더링 조건은 다음과 같습니다:

1. 상태가 변경될 때:
   • useState로 관리하는 상태가 변경되면 해당 컴포넌트는 리렌더링됩니다. 상태는 컴포넌트의 UI에 영향을 주는 데이터이기 때문에 UI를 갱신하기 위해 리렌더링이 발생합니다.
2. Props가 변경될 때:
   • 부모 컴포넌트로부터 전달받은 props 값이 변경되면 자식 컴포넌트는 리렌더링됩니다. 이는 컴포넌트가 전달받은 데이터가 달라지면 새로운 데이터에 맞춰 UI를 갱신하기 위함입니다.
3. 부모 컴포넌트가 리렌더링될 때:
   • 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 기본적으로 리렌더링됩니다.
4. forceUpdate 메서드를 호출할 때:
   • forceUpdate 메서드를 호출하여 강제로 리렌더링할 수 있습니다.
5. 컨텍스트가 변경될 때:
   • Context를 사용하면, 해당 컨텍스트 값을 사용하는 모든 하위 컴포넌트는 컨텍스트 값이 변경될 때 리렌더링됩니다.
6. 키가 변경될 때:
   • 컴포넌트의 key 값이 변경되면 React는 해당 컴포넌트를 새롭게 생성하고 리렌더링합니다. 이 방법은 종종 리스트 아이템을 업데이트할 때 사용됩니다.

이 중에서 상태 변경 및 부모-자식 컴포넌트에 대해서 좀 더 자세히 알아보도록 하겠습니다.

상태 변경

상태 변경에서 중요한 것은 상태가 변경되어야 한다는 점 입니다.

아래 예제를 보면 count가 useState로 관리되고, 버튼을 누르면 count 상태가 변경되어 다시 렌더링이 발생합니다.

function App() {
  console.log("App Render");
  
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

하지만 개발 할 때 이 개념을 알고는 있지만 적용하지 못하고 헤매는 경우가 많이 있습니다.

아래 코드는 sessionStorage에 accessToken이 없으면 로그인 화면으로 이동하고, 로그인에 성공하면 sessionStorage에 accessToken을 추가하고 홈 화면으로 이동하는 코드입니다.

function App() {
  console.log("App Render");

  const accessToken = sessionStorage.getItem("accessToken");

  return (
    <BrowserRouter>
      {accessToken ? null : <Navigate to="/Login" />}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
}

function Login(){
  console.log("Login Render");

  const navigate = useNavigate();
  const handlerClickLogin = (e) => {
    e.preventDefault();
    sessionStorage.setItem("accessToken", "TEST");
    navigate("/");
  }

  return (
    <div>
      <button onClick={handlerClickLogin}>Login</button>
    </div>
  )
}

function Home() {
  console.log("Home Render");
  
  return (
    <div>Home</div>
  )
}

사실 위 코드는 의도대로 동작하지 않습니다. 로그인 버튼을 누르면 accessToken이 저장되고 Home 화면으로 이동하는데 바로 다시 로그인 화면으로 이동합니다.

이유는 아주 간단합니다. accessToken이 상태 관리 변수가 아니어서 App 컴포넌트가 리렌더링이 되지 않기 때문입니다. 즉, App 컴포넌트는 accessToken 변경과 상관없이 항상 아래 코드와 같이 동작합니다.

function App() {
  console.log("App Render");

  const accessToken = sessionStorage.getItem("accessToken");

  return (
    <BrowserRouter>
      <Navigate to="/Login" />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
}

의도한대로 동작하기 위해서는 accessToken을 상태 관리 해서 App 컴포넌트를 리렌더링하게 만들어야 하는데 accessToken은 여러 컴포넌트에서 사용하기 때문에 전역 상태 관리 라이브러리를 사용해서 상태 관리 하는게 유리합니다.

부모 컴포넌트가 리렌더링

부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 기본적으로 리렌더링됩니다. 자식 컴포넌트는 부모 컴포넌트의 안에 사용된 모든 컴포넌트들을 말합니다.

아래 코드에서 부모-자식 관계를 설정하는 것을 어렵지 않습니다.

const App = () => {
  console.log("App Render");
  return <Parent />
}

const Parent = () => {
  console.log("Parent Render");
  return <Child />
}

const Child = () => {
  console.log("Child Render");
  return <GrandChild />
}

const GrandChild = () => {
  console.log("GrandChild Render");
  return <div>GrandChild</div>
}

App 컴포넌트에서 Parent 컴포넌트를 사용하고, Parent 컴포넌트에서 Child 컴포넌트를 사용하고, Child 컴포넌트에서 GrandChild 컴포넌트를 사용했기에 아래와 같이 표현할 수 있습니다.

만약 아래와 같이 코드를 작성하면 어떻게 될까요?

const App = () => {
  console.log("App Render");
  return <Parent />
}

const Parent = () => {
  console.log("Parent Render");
  return (
    <Child1>
      <Child2>
        <Child3 />
      </Child2>
      </Child1>
  )
}

const Child1 = ({children}) => {
  console.log("Child1 Render");
  return <div>{children}</div>
}

const Child2 = ({children}) => {
  console.log("Child2 Render");
  return <div>{children}</div>
}

const Child3 = ({children}) => {
  console.log("Child3 Render");
  return <div>막내</div>
}

DOM 관점에서 바라본다면 트리 구조로 Parent 컴포넌트에서 Child1 컴포넌트 하위로 Child2 컴포넌트를 Child2 컴포넌트 하위로 Child3 컴포넌트를 그리기 때문에 Child1 ~ Child3 컴포넌트가 각각 부모-자식 관계로 생각할 수 있습니다.

하지만 Child1 ~ Child3 컴포넌트는 모두 Parent 컴포넌트가 사용한 컴포넌트로 모두 Parent 컴포넌트의 자식 컴포넌트이며 Child1 ~ Child3은 형제 컴포넌트입니다.

아래와 같이 일정 주기 마다 컴포넌트를 렌더링하도록 함수를 만들어서 테스트 해보면 Child1 컴포넌트가 렌더링되어도 Child2와 Child3은 렌더링 안되는 것을 확인할 수 있습니다.

const App = () => {
  console.log("App Render");
  return <Parent />
}

const Parent = () => {
  console.log("Parent Render");
  return (
    <Child1>
      <Child2>
        <Child3 />
      </Child2>
      </Child1>
  )
}

const Child1 = ({children}) => {
  useForceRender(2000);
  console.log("Child1 Render");
  return <div>{children}</div>
}

const Child2 = ({children}) => {
  console.log("Child2 Render");
  return <div>{children}</div>
}

const Child3 = ({children}) => {
  console.log("Child3 Render");
  return <div>막내</div>
}

const useForceRender = (interval) => {
  const render = useReducer(() => ({}))[1];
  useEffect(() => {
    const id = setInterval(render, interval);
    return () => clearInterval(id);
  }, [interval]);
}

또 다른 코드로 예를 들어보겠습니다.

const App = () => {
  console.log("App Render");
  return (
    <Parent lastChild={<Child3 />}>
      <Child2 />
    </Parent>
  )
}

const Parent = ({children, lastChild}) => {
  console.log("Parent Render");
  return (
    <div>
      <Child1 />
      {children}
      {lastChild}
    </div>
  )
}

const Child1 = () => {
  console.log("Child1 Render");
  return <div>Child1</div>
}

const Child2 = () => {
  console.log("Child2 Render");
  return <div>Child2</div>
}

const Child3 = () => {
  console.log("Child3 Render");
  return <div>Child3</div>
}

이 코드에서 Parent 컴포넌트가 리렌더링 되면, 리렌더링 되는 자식 컴포넌트는 어떤것일까요? 정답은 Child1 컴포넌트입니다.

위에서 계속 언급했듯이 자식 컴포넌트는 부모 컴포넌트에서 사용한 컴포넌트로 위 코드는 아래와 같이 표현할 수 있습니다.

위 그림과 같이 Parent 컴포넌트, Child2 컴포넌트, Child3 컴포넌트는 모두 App 컴포넌트의 자식으로 Parent 컴포넌트에 영향을 받지 않습니다.

마치며

간단하게 React 리렌더링되는 조건에 대해서 알아보았습니다. React 리렌더링 되는 조건을 정확히 알아야 하는 이유는 리렌더링이 성능 및 사용자 경험에 큰 영향을 주기 때문에 최적화를 잘 하기 위해서는 반드시 알고 있어야 하는 항목입니다.

참고 자료