React_리액트 컴포넌트, 컴포넌트 처리 과정

컴포넌트란?

잠재적으로 재사용이 가능한 HTML 과 CSS, 관련된 Javascript 로직들을 감싼 코드 블록
복잡한 사용자 인터페이스를 관리하기 쉽도록 작게 분리하여 UI의 다른 위치에서도 사용할 수 있게 해준다.

왜 컴포넌트를 사용하나요?

코드의 재사용성, 유지보수성을 높이고, UI를 효율적으로 관리하기 위해서!

1. Reusable Building Block

여러 곳에서 반복적으로 재사용이 가능해 코드 중복을 줄일 수 있다.

2. Related Code Lives Together

유사한 코드가 대체로 함께 묶여있어 한부분에서 수정이 가능하기 때문에 오류 위험 적고, 개발 과정이 단순해진다.

3. Separation of Concerns

개발 원칙을 따르면서도 디자인 시스템과 UI 일관성 유지를 지원한다.

JSX

( javascript Syntax Extension 자바스크립트 문법 확장자 )

• React에서 HTML을 작성하는 것처럼 보이지만, 실제로는 JavaScript 코드로 변환되는 문법
• 자바스크립트 파일 내에 HTML 코드를 작성하기 때문에 구조를 쉽게 파악할 수 있다.
• UI 선언이 직관적이고 유지보수하기 쉽다.
• 브라우저에서는 사용이 불가능하다(브라우저에서 지원되지 않는 파일 확장자)

리엑트의 컴포넌트 처리 과정 & 컴포넌트 트리 생성법

1. 컴포넌트 함수 실행

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

//ReactDOM.createRoot()를 사용하여 루트 컴포넌트를 렌더링
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

function App() {
  // 최상위 컴포넌트(App)를 실행하고 JSX 반환값을 가상 DOM으로 변환(컴포넌트 트리 구성)
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

2. 컴포넌트 트리를 바탕으로 가상 DOM 생성

컴포넌트 트리란?

React가 컴포넌트 간 계층 구조를 생성하여 UI를 구성하는 방식, 리엑트는 해당 구조를 메모리에 저장하고 변경 사항을 감지

App //부모(루트) 컴포넌트
 ├── Header
 ├── Main
 └── Footer
 //Header,Main,Footer 자식 컴포넌트

3. 가상 DOM 기반으로 실제 DOM 업데이트

이전 Virtual DOM과 새로운 Virtual DOM을 비교하여 변경된 부분의 DOM만 업데이트, 변경

const reactDeacriptions = ["a","b","c"]
function getRandomNumber (max){
	return Math.floor(Math.random() * (max * 1))
}
function Header(){
const description = reactDescriptions[getRandomNumber(2)]
	return(
		<p>{description}...</p>
	)
}
//헤더에 변경사항이 있다면 Header 컴포넌트를 다시 실행하여 새로운 가상DOM을 만든다.

App
 ├── Header // ✅ 이전 가상DOM과 새로운 가상DOM을 비교해 변경된 부분만 감지하여 실제 DOM 업데이트!
 ├── Main
 └── Footer

💡 리렌더링 ≠ DOM 업데이트

React에서 부모가 리렌더링되면 모든 자식이 다시 렌더링되는 것이 기본 동작이지만 React에서 리렌더링과 DOM업데이트는 다르며 렌더링이 반드시 실제로 DOM을 변경하는 것은 아니다.

리렌더링 (Re-rendering)	DOM 업데이트 (Commit Phase)
- 컴포넌트 함수를 다시 실행하는 것, 새로운 UI를 만들기 위해 Virtual DOM을 다시 계산하는 과정	- Virtual DOM에서 변경된 부분만 찾아서 실제 DOM을 업데이트하는 과정
- 모든 자식 컴포넌트도 기본적으로 다시 실행되나 결과가 바뀌지 않으면 실제 DOM을 업데이트하지 않음	- 변경된 부분이 없으면 실제 DOM 변경 없음

import { useState } from "react";

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      /* 부모 컴포넌트가 변경되면, 모든 자식 컴포넌트는 자동으로 리렌더링된다. props를
      전달받은 ChildB는 변경된 부분의 DOM이 업데이트 되며, props를 받지 않은 ChildA
      는 리렌더링되지만 동일한 JSX를 반환하기 때문에 DOM 변경, 업데이트를 하지 않음
      */
      <ChildA />
      <ChildB count={count} />
    </div>
  );
}