📅 2025-10-02

➡️ React JSX, props에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리

---

🔎 학습 리마인드

📌 JSX

💡 JSX란?

• JavaScript를 확장한 문법으로, React에서 UI를 구성할 때 사용하는 특별한 문법
• HTML을 자바스크립트 안에서 쓸 수 있게 만든 문법
• JavaScript XML
• 컴포넌트 구조를 표현하는 데 사용
• JSX 안의 { }에는 표현식만 작성
  • js문법을 JSX안에서 사용할 때 { }를 이용해서 사용

    import React from 'react';
    
    function App() {
      const number = 1;
    
      return (
        <div className="App">
          <p>안녕하세요</p>
          {/* 삼항 연산자 사용 */}
          <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
        </div>
      );
    }
    
    export default App;

❗컴포넌트에서 반환할 수 있는 엘리먼트는 1개

• class 대신 ClassName
  • JSX로 작성하는 태그 내에서 클래스 명을 정해줄 땐 속성 값을 className으로 사용

---

📌 props

💡 props란?

• 컴포넌트 간 데이터 전달 방식
• 부모가 가진 값을 자식에게 넘겨줄 때 사용

규칙

1. 흐름은 단방향 : 부모 → 자식으로만 전달
2. 읽기 전용 : 자식은 받은 props를 직접 수정하지 않음

• 부모가 내려준 데이터를 객체 형태로 묶어서 전달받음

  function Mother() {
    const name = "홍길동";
    return <Child motherName={name} />; // name을 motherName 이라는 이름으로 전달
  }
  
  function Child(props) {
    console.log(props); // { motherName: "홍길동" }
    return <div>{props.motherName}</div>;
  }

💡 props drilling

• props는 부모에서 자식으로만 전달할 수 있기 때문에 깊은 단계의 컴포넌트에게 전달하려면?
  • 부모 → 자식 → 손자 → 증손자 … 이렇게 계속해서 중간 컴포넌트들이 필요 없는 props를 받아서 다시 넘겨줘야 함. 이 과정을 props drilling이라고 부름

💡 Props Children

• 부모 컴포넌트가 자식 태그 안에 작성한 콘텐츠를 그대로 넘겨줄 때 사용
• 일반 props와 동일하지만, 이름이 children으로 정해져 있는 예약 속성

function User(props) {
  return <div>{props.children}</div>;
}

function App() {
  return <User>안녕하세요</User>;
}

children 활용

• 가장 많이 쓰이는 곳은 레이아웃 컴포넌트
• 공통된 UI (예 :Header, Footer)는 고정하고 내부에 들어갈 내용만 children으로 바꿀 수 있음

  //Layout.jsx
  function Layout({ children }) {
    return (
      <div>
        <header>공통 헤더</header>
        <main>{children}</main>
      </div>
    );
  }
  export default Layout;
  
  // App.jsx
  import Layout from "./Layout";
  
  function App() {
    return (
      <Layout>
        <div>여기는 App 페이지의 컨텐츠</div>
      </Layout>
    );
  }
  
  // About.jsx
  import Layout from "./Layout";
  
  function About() {
    return (
      <Layout>
        <div>여기는 About 페이지의 컨텐츠</div>
      </Layout>
    );
  }

💡 구조분해 할당으로 props받기

• props도 객체이므로, 구조 분해 할당을 쓰면 훨씬 간단함

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

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

• 부모 props를 넘기지 않을 수 있기 때문에 기본값 설정해 두면 안전

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

---