[TIL] 24.12.31(화)

React 입문 2주차

 

2-1

React 소개

 

React(라이브러리) 와 프레임워크의 차이

React.js = UI Library

프레임워크: 개발자가 기능 구현에만 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지원하는 '기술의 조합'

(Spring Framework / Vue.js / Angular.js / Django / Flask / Python 등)

라이브러리: 공통 기능의 모듈화가 이루어진 프로그램의 집합

(React.js / react-router-dom / redux 등)

제어의 역전(IoC: Inversion Of Control): 본래 개발 시 '제어'를 하는 것은 개발자의 역할 > 프레임워크를 사용하는 경우 시키는대로 코드를 짜게 되면 프레임워크가 알아서 제어의 흐름을 가져가는 것

 

React.js가 라이브러리인 이유

그 자체만으로 프레임워크라고 불리기엔 제공해야 하는 기능이 부족함

상태관리(Redux), 라우팅(React-router-dom), 스타일링 등의 기능이 합쳐져 있었다면 프레임워크로 불릴 수 있었을지도?

 

React 특징과 이점 이해하기

 

SPA: Single Page Application, 한 개의 페이지(html)로 이루어진 애플리케이션이라는 말

MPA: Multi Page Application, SPA와 상반되는 개념 (멀티 페이지로 이루어진 애플리케이션)

 

인기가 많은 React(npm trends): npm(node package manager) trends에서 SPA 아키텍쳐 기술의 동향을 살펴보면, react.js의 인기가 월등히 높음을 알 수 있음

 

UI가 필요한 곳이면 어디든: React Native를 활용하면 웹뿐만 아니라 유저 인터페이스를 만드는 모든 곳에 쓰일 수 있음(VR도 가능)

막강한 커뮤니티: npm trends에서 볼 수 있듯이, React 기술에 종사하는 사람들이 정말 많음. 따라서 다양한 사람들이 많은 조언가 정보를 공유함 > 채용공고도 프론트엔드 영역에서는 압도적으로 많다고 할 수 있음.

 

 

 

2-2

SPA(Single Page Application)

 

MAP와 SPA의 차이 / 순수 JS로 SPA를 만들 때 Hashed Routing이 필요한 이유 / 순수 JS로 SPA Routing 구현

SPA: Single Page Application의 약자로써, 하나의 페이지로 이루어져 있는 애플리케이션을 뜻함. 대표적으로 React, Vue, Angular가 있음. SPA 아키텍쳐의 동작원리를 이해해야 React를 이해하는 것이 쉬움

 

MPA: Multi Page Application의 약자로써, 2개 이상의 페이지(html)로 구성된 애플리케이션을 의미

(ex. 최초 보여주었던 페이지 이외에도 서버가 새롭게 생성한 페이지가 존재함. (= 여러 페이지(=Multi Page)로 이루어진 애플리케이션)

 

SSR: Surver Side Rendering의 약자로써, 초기 화면 로딩 시 서버에서 완성된 html 페이지를 만들어 브라우저에 전송하는 방식. 이 과정에서 '렌더링(Rendering)'이라는 용어가 자주 사용되지만, SSR에서의 렌더링은 브라우저에서 보여지는 시각적인 요소를 그리는 것이 아님 > 대신, 서버는 html 문서를 구성하는 데이터를 처리하고, 이를 html 형태로 변환하여 브라우저에 전송함.

즉, SSR에서의 렌더링은 html 문서 자체를 생성하는 과정을 의미함

이렇게 서버에서 생성된 html은 브라우저로 전송된 후, 브라우저가 이 html을 해석하고 최종적으로 사용자에게 시각적인 페이지를 표시하는 단계, 즉 브라우저에서의 렌더링으로 이어짐. SSR은 이러한 서버에서의 처리 과정을 통해 초기 페이지 로딩 속도를 향상시키고, 검색 엔진 최적화(SEO)에 유리하게 작용함. 이는 서버에서 사전에 페이지의 주요 내용을 포함시킬 수 있기 때문에 검색 엔진이 페이지 내용을 더 쉽게 인식할 수 있도록 함.

 

전통적인 페이지 라이프사이클: 클라이언트(웹브라우저)가 맡았던 역할은 단순히 서버에서 보내주는 html 파일을 보여주는 것 뿐이었음.

최초 랜딩한 페이지에서 댓글을 입력한다고 가정해보면, 서버는 댓글 목록이 표시된 새로운 페이지를 다시 클라이언트에게 주는 방식

 

SPA(Single Page Application)이란, 하나의 html 페이지로 이루어진 애플리케이션을 의미함. 전통적인 MPA가 가지는 불편함(깜빡거림, 렌더링 속도 등)때문에 등장하게 되었음. 최초에 서버로부터 로드된 하나의 웹 페이지만 유지되며, 이 페이지는 사용자와의 상호작용에 따라 필요한 데이터만을 서버로부터 받아와서 동적으로 내용을 변경함. 

새롭게 전체 페이지를 서버가 생성하여 보내는 일은 없음. > 브라우저가 필요한 정보만을 받아서 자체적으로 페이지를 업데이트하는 CSR과 관련이 깊음

 

CSR(Client Side Rendering): 사용자가 보게되는 화면을 재구성하는 주체는 '브라우저' > 서버 측이 아닌 클라이언트(브라우저)에서 데이터를 기반으로 렌더링 했다 라는 의미에서 CSR이라고 함.

 

Routing: SPA가 MPA처럼 여러 페이지를 갖고 있지 않으면 어떻게 사용자가 여러 페이지를 이동하면서 웹서비스를 이용하는 것 처럼 보여질 수 있을까? > Hashed Routing의 개념을 토대로 Routing의 개념을 학습해야 함.

Hashed Routing

Hashed Routing: hash 값을 기준(=hashed)으로 페이지를 이동한다(=routing)

 

꼭 외워야 하는 구조!

 

Origin까지가 웹서버가 있는 위치: http://localhost:3000은 로컬 컴퓨터로 웹서비스를 제공하고 있음을 의미함.

path, query string도 정말 중요한 개념! > url에는 어떤 '요청'값에 대한 정보가 많이 들어가 있음. path와 query string 모두 어떤 요청에 대한 상세한 요구사항이라고 이해하면 됨.

 

지금까지 SPA 아키텍처를 이해하기 위해 Hashed Routing을 배웠지만, 실제 웹사이트를 보면 #이 포함된 페이지 보다는 깔끔하게 경로처리가 되어있는 페이지를 더 많이 볼 수 있음. 이런 방식이 사용자에게는 훨씬 더 깔끔한 느낌을 줌

(ex. www.sample-hompage.com/#about  (x) / www.sample-homepage.com/about  (o)

> 이러한 방식을 Browser Routing 이라고 함

 

React.js는 UI 구성을 위한 라이브러리이기 때문에, 딱히 어느 한 라우팅 스타일을 강제하지는 않음.

다만, 사용자 경험을 위해 Browser Routing 방식을 거의 채택하고 있다고 이해하면 됨.

 

 

 

2-3

개발 환경 세팅

 

npm / yarn

공통적 특징: 자바스크립트 런타임 환경인 노드(Node.js)의 패키지 관리자, 애플의 앱스토어나 구글의 플레이스토어처럼 전 세계의 많은 개발자들이 본인들이 만든 유용하고 다양한 패키지들 또는 프로그램을 '온라인 데이터베이스'에 올려놓음 > 그것을 쉽게 설치하고 삭제할 수 있도록 도와주는 관리자!

 

차별적 특징

NPM

a. node.js를 설치할 때 자동으로 설치됨

b. Node Package Manager의 약자

c. JavaScript 프로그래밍 언어를 위한 패키지 관리자로, 수많은 JavaScript 라이브러리와 애플리케이션을 호스팅하는 레지스트리 역할

 

YARN

a. 2016년에 페이스북, Exponent, Google, Tilde와 같은 회사에서 공동 작업으로 개발한 패키지 관리자

b. npm과의 호환성이 좋고, 속도나 안정성 측면에서 npm보다 좋음

- 병렬 패키지를 다운로드 하여 속도를 향상시킥, 더 정확한 버전 관리를 위해 yarn.lock 파일을 사용함

- 속도와 관련해서는, npm도 버전 5 이후로 많은 성능 개선이 이루어져서 현재는 성능 차이가 많이 줄어들었음.

 

명령어

 

* 사실 어떤 것을 사용해도 괜찮음! 지속적으로 관리되고 있고, 넓은 커뮤니티가 있기 때문!

 

JavaScript 런타임 환경

런타임: 프로그래밍 언어가 구동(running)되는 환경(environment)을 의미함.

 

자바스크립트의 대표적인 런타임 환경은 2가지로 볼 수 있음

1. 브라우저(ex. Chrome, Microsoft Edge, Firefox, Internet Explorer)

2. node 환경

 

* 즉, JavaScript 파일을 실행할 수 있는 방법이 2가지가 있다는 이야기!

 

 

 

2-4 ~ 2-5

프로젝트 생성 - 1, 2

 

CRA(Create React App)란?

한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법

• React 프로젝트를 구성하기 위해 필요한 것들은 상당히 많음! WebPack, babel, eslint 등.
• 이러한 것들을 신경쓰지 않아도 알아서 촥촥 → 보일러플레이트

 

Vite란?

Vite는 프론트엔드 개발을 위한 새로운 빌드 도구로, Evan You (Vue.js의 창시자)에 의해 개발되었음.

Vite는 원래 Vue.js 애플리케이션을 위해 만들어졌지만, 현재는 React, Svelte, Vanilla JS 등 다양한 프레임워크와 라이브러리를 지원.

Vite 역시, CRA와 같이 리액트 프로젝트를 풀 세팅해주는 빌드 도구!

WebPack을 사용하는 CRA 대신 Esbuild를 사용하는 Vite는 어떤 장점이 있고, 왜 사용하는게 좋을까?

 

CRA vs Vite (속도)

Vite: 이러한 특징이 있어요.

빠른 콜드 스타트와 HMR(Hot Module Replacement)

*콜드 스타트: 차가운 상태에서 얼마나 빨리 실행되느냐(ex. 한겨울 차가운 자동차에 시동걸고 얼마나 걸리는지)

속도 측면에서 기존 CRA와는 비교가 되지 않을 정도로 빠름!

CRA는 기본적으로 설정을 숨기지만(상세한 설정을 위해서는 어려운 분해 과정을 거쳐야 함),

Vite는 사용자가 필요에 따라 설정을 더 쉽게 조정할 수 있음!

Esbuild를 사용 > Go 언어 베이스의 자바스크립트 빌드 툴. CRA가 채택하는 웹팩과 비교할 때, 말이 안되는 수준의 속도를 보여줌

 

 

 

2-6

컴포넌트와 jsx(작스)

 

React Components란?

컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있음.

개념적으로 컴포넌트는 JavaScript 함수와 유사함.

"props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환함.

(> 리액트에서 컴포넌트가 함수로 작성이 되기 때문에 인풋 / 아웃풋에 대해 이야기 하는 것)

 

 

리액트 컴포넌트를 표현하는 두 가지 방법

두 가지 모두 기능상으로는 동일하지만, 리액트 공식 홈페이지에서는 함수형 컴포넌트를 사용하기를 권장하고 있음. 

훨씬 쉽고, 확장성도 훨씬 크기 때문에! (최근 현업에서도 함수형 컴포넌트를 훨씬 많이 사용하고 있음)

* 결론적으로 리액트 세계에서 말하는 컴포넌트(블럭)는 즉, '함수'!

(ex. 누군가 와서 "컴포넌트를 만들어 보세요"라고 하면, html처럼 생긴 jsx를 return하는 함수를 만들면 됨.)

 

1. 함수형 컴포넌트 (리액트에서 권장하는 방법)

// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 훨씬 쉬운 표현을 해보면 아래와 같죠.
function App () {
	return <div>hello</div>
}

•  

 

2. 클래스형 컴포넌트 (과거에 사용하던 방법)

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

 

우리가 만든 Vite 프로젝트 살펴보기

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";

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

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

export default App;

 

 

컴포넌트 보는 방법

컴포넌트(함수) 코드를 볼 때는 영역을 나누어서 보면 조금 더 편함.

컴포넌트 밖에서는 내가 필요한 파일을 import 하거나, 또는 export default 라는 기능을 통해

내가 만든 컴포넌트를 밖으로 내보내는 코드가 있음.

컴포넌트 안에서는 자바스크립트를 쓸 수 있는 부분이 있음. 컴포넌트 안에서 어떤 자바스크립트 코드를 작성하고 싶다면 여기에다 작성!

그리고 return 을 기준으로 아랫부분에서는 HTML(정확히 말하면 JSX. 나중에 배울 예정!) 을 작성할 수 있음.

여기에 작성한 html 코드와 값들이 화면에 보여지는 것!

a~c의 내용을 조합해보면 아래의 내용과 같음.

컴포넌트 보는 방법

 

주의사항

컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자로 만들어야 함.

폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 파스칼케이스로 이름 지어야 함.

(폴더 = 소문자 / 파일 = 대문자)

 

 

실습: 컴포넌트 만들기

(my-first-vite-react-app > App.jsx에 작성했음)

import React from 'react';
function App() {
  
	// <---- 자바스크립트 영역 ---->
const handleClick = () => {
  alert("안녕하세요.");
};
  return (
  /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: '100vh',
        display: ' flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
   {/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */}
   <span>이것은 내가 만든 App 컴포넌트 입니다</span>
   <button onClick={handleClick}>클릭!</button>
   </div>
  );
}

export default App;

 

App.jsx 코드 수정하여 반영한 페이지

 

 

 

부모-자식 컴포넌트 연결 방법

모든 컴포넌트들은 계층을 가질 수 있음 > 아래의 코드 참고

(my-first-vite-react-app > App.jsx에 작성했음)

 

// 할아버지, 엄마, 자식

function App () {
  return (
  <div>
    <h1>부모-자식 관계 테스트</h1>
    <GrandFather />
  </div>
  );
}

export default App;

function GrandFather () {
  return (
  <div>
    <p>나는 할아버지입니다.</p>
    <Mather />
  </div>
  );
}

function Mather () {
  return (
  <div>
    <p>나는 엄마입니다.</p>
    <Child />
  </div>
  );
}

function Child () {
  return (
  <div>
    <p>나는 자식입니다.</p>
  </div>
  );
}

 

 

JSX란?

문자열도, HTML도 아닌 요상한 녀석.

엘리먼트는 단순히 화면에 그려지는 HTML 요소라고 생각하면 됨.

(자바스크립트 코드 이지만 html 요소처럼 생긴 녀석들이 변수 할당 되는 형태의 문법!)

// JavaScript를 확장한 문법
// JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법
const element = <h1>Hello, world!</h1>;

 

HTML을 품은 JS => JSX (자바스크립트인데 .XML(=HTML) 을 포함한 문법!

아래와 같은 HTML 태그는 .js 파일 안에서 쓸 수 없음

<div>
	<h1>안녕하세요!</h1> 
	<p>시작이 반이다!</p>
</div>

 

그래서 나온 것이 JSX!

자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 편하게 할 수 있음.

const start_half = <div>
    <h1>안녕하세요!</h1>
    <p>시작이 반이다!</p>
  </div>;

 

브라우저는 JS만 해석 가능한가?

정답! 브라우저는 jsx 파일을 직접 해석할 수 없음. 따라서 babel을 이용하여 jsx를 js로 변환함!

 

[변환 전] 우리가 보는 jsx 파일

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

 

[변환 후] 브라우저가 보는 js 파일

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

 

 

 

JSX 실습

태그는 꼭 닫아주기 / 무조건 한개의 엘리먼트를 반환하기 /JSX에서 javascript 값을 가져오려면? ( >중괄호를 쓴다!) / class 대신 className / 인라인으로 style 주기

import React from 'react'

const App = () => {
  // 자바스크립트 영역
  const pTagStyle = {
    color: "orange",
    fontSize: "20px",
  };
  
  const NUMBER = 1000;

  return (
    // 리액트 jsx 문법에서는 리턴문 이하에 반드시 하나의 태그만 있어야 함
    // 동일 레벨에 다른 코드가 생기는 순간 오류 발생
    // jsx 문법에서는 자바스크립트 문법이 필요하다 하면 반드시 {}를 넣어야 함
    // 리액트에서 클래스를 부여하고 싶으면 className 이라고 입력해야 함
    // ( > 자바스크립트에 클래스라는 문법과 혼동되지 않도록 하기 위해)
    <> 
     <div id="abc" className="abc"> 
       <p style={pTagStyle}>첫 번째 줄</p>
       </div>
     <div>{NUMBER}</div>
    </>
  );
};

export default App

 

 

 

2-7

props

 

props란?

부모 > 자식 데이터 전달 메커니즘

컴포넌트 끼리의 정보교환 방식!

부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터. 다시 말해, 컴포넌트 간의 정보 교류 방법!

* props는 반드시 위에서 아래 방향으로 흐른다. 즉, [부모] > [자식] 방향으로만 흐른다. (단방향)

* props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.

 

코드를 통해 props 살펴보기

최상위 컴포넌트인 App이 품고있는 Child의 연결 성공 문구가 화면에 보여짐.

// src/App.jsx

import React from "react";

function App() {
  return <GrandFather />;
}

function GrandFather() {
  return <Mother />;
}

function Mother() {
	const name = '홍부인';
  return <Child />;
}

function Child() {
  return <div>연결 성공</div>;
}


export default App;

 

 

코드를 통해 props 살펴보기

props를 활용하여 Child에게 Mother의 lastname 물려주기

// src/App.jsx

import React from "react";

function App() {
  return <GrandFather />;
}

function GrandFather() {
  return <Mother />;
}

function Mother() {
	const lastname = '최';
  return <Child lastname={lastname} />;
}

function Child(props) {
  console.log("props => ", props);

  const name = "르탄";
  return (
  <div>
    <p>{`내 이름은 ${props.lastname}${name}입니다.`}</p>
  </div>
  );
}


export default App;

 

 

코드를 통해 props 살펴보기

props를 활용하여 Child에게 GrandFather의 르탄이 이름 물려주기

// src/App.jsx

import React from "react";

function App() {
  return <GrandFather />;
}

function GrandFather() {
  const name = "르탄이";
  return <Mother name={name} />;
}

function Mother(props) {
  const name = props.name;
  return <Child name={name} />;
}

function Child(props) {
  const name = props.name;
  return<div>{name}</div>;
}


export default App;

 

 

 

컴포넌트에서 말하는 children은 무엇을 의미할까?

자식 컴포넌트로 정보를 전달하는 또 다른 방법. 우리는 이미 그 방법을 ‘props’라고 배웠음. children도 props가 맞음!

import React from "react";

const User = (props) => {
  console.log("props =>", props);
  return <div>유저님 {props.children}</div>
};

const App = () => {
  return <User abc="123">안녕하세요!!!</User>;
};

export default App;

 

 

children의 용도 : Layout 컴포넌트를 만들 때 주로 사용

Layout 컴포넌트 안에는 header 라는 컴포넌트가 있고, header 아래에 {props.children} 를 통해서 props를 받아 렌더링 하고 있음. 즉, Layout 컴포넌트가 쓰여지는 모든 곳에서 <Layout>…</Layout> 안에 있는 정보를 받아서 가져올 수 있는 것!

// src/About.jsx

import React from "react";
import Layout from "./components/Layout";

function App() {
  return (
    <Layout> 
      <div>여긴 App의 컨텐츠가 들어갑니다.</div>
    </Layout>
  );
}
export default App;

이 코드를 통해, Layout에 있는 header가 보여지게 되고, “여긴 App의 컨텐츠가 들어갑니다.” 라는 문장이 Layout의 props로 전달되는 것. 결과적으로 header 컴포넌트를 Layout 컴포넌트에서 한번만 작성하면 여러 페이지에서 모두 보여지게 할 수 있음.

 

이해하기 쉬운 코드로 작성해 보자면 아래와 같음

// src/About.jsx

import React from "react";

function App() {
  return (
    <Layout> 
      <div>여긴 App의 컨텐츠가 들어갑니다.</div>
    </Layout>
  );
}
export default App;

function Layout(props) {
  const children = props.children;

  return (
    <main>
      <header>헤더입니다.</header>
      {children}
      <footer>푸터입니다.</footer>
    </main>
  );
}

 

 

Layout 컴포넌트를 About 컴포넌트에 또 사용한 예시 코드

// src/About.jsx

import React from "react";
import Layout from "./components/Layout";

function About() {
  return (
    <Layout> 
      <div>여긴 About의 컨텐츠가 들어갑니다.</div>
    </Layout>
  );
}
export default About;

 

 

 

구조분해할당과 props

지금까지는 자식 컴포넌트에서 props를 받을 때 이렇게 했음.

function Todo(props){
	return <div>{props.todo}</div>
}

 

문제는 없지만 todo 라는 props를 사용하는 모든 곳에서 props. 를 붙여줘야만 했음. 이것을 조금 더 짧게 쓰는 방법이 존재함.

바로 자바스크립트의 구조 분해 할당을 이용하는 것! 앞서 설명했듯이 props는 object literal 형태의 데이터로,

우리는 아래와 같이 구조 분해 할당을 이용할 수 있음!

function Todo({ title }){
	return <div>{title}</div>
}

훨씬 간단하고 짧아진 코드. 만약 여러개의 props를 받는다면, { } 안에 여러개의 props를 그대로 써주면 됨.

function Todo({ title, body, isDone, id }){
	return <div>{title}</div>
}

 

 

 

default arguments

부모 컴포넌트에서 자식 컴포넌트로 정보를 전달할 때 사용함.

때때로, 특정 props가 부모 컴포넌트로부터 전달되지 않을 수도 있는데, 이 경우 자식 컴포넌트에서 해당 props의 기본값을 설정해 줄 필요가 있음. 이를 위해 리액트에서는 "default arguments" 방식을 활용할 수 있음!

Default Arguments는 함수의 매개변수에서 기본값을 설정하는 자바스크립트의 표준 기능.

리액트의 함수형 컴포넌트에서는 이 기능을 활용하여 props의 기본값을 쉽게 정의할 수 있음.

컴포넌트가 부모로부터 특정 props를 받지 못했을 경우에도 에러 없이 기본값을 사용하여 컴포넌트를 렌더링할 수 있게 해 줌.

예를 들어, 아래와 같이 어떤 컴포넌트가 사용자의 이름을 출력하는 기능을 가지고 있지만, 부모 컴포넌트가 이름을 제공하지 않는 경우가 있다고 가정해보면

function Welcome({ name = "Guest" }) {
    return <h1>Welcome, {name}!</h1>;
}

위 코드에서 name = "Guest"는 name prop이 전달되지 않았을 때 "Guest"라는 기본값을 사용하도록 설정함.

이렇게 설정함으로써, 부모 컴포넌트에서 name prop을 제공하지 않아도 Welcome 컴포넌트는 "Welcome, Guest!"라는 문구를 표시할 수 있음.