컴포넌트 & JSX

1. 컴포넌트 (Component)

정의

• 리액트에서 독립적이고 재사용 가능한 UI 단위
• HTML, JS, CSS를 하나로 묶어 표현할 수 있음

특징

1. 재사용성 : 한 번 만들면 여러 곳에서 <컴포넌트명 />으로 쉽게 사용 가능
2. 독립성 : 다른 컴포넌트와 충돌 없이 개별적으로 동작
3. UI 조각화 : 큰 페이지를 작은 단위로 쪼개 관리 → 유지보수 쉬움
4. 단방향 데이터 흐름 : 부모 → 자식으로 props 전달

2. 컴포넌트 만들기

1. 기본 구조

export default function ComponentName(props) {
    // ---------> JS 코드 START (변수, 함수, 조건문 등)
    const message = "Hello React!";

    // ---------> JSX 코드 START
    return (
        <>
            <h1>{message}</h1>
            <p>{props.content}</p>
        </>
    );
}

2. 규칙

1. 컴포넌트명은 대문자로 시작해야 함 (React 규칙)

• function header() ❌
• function Header() ⭕

2. 하나의 .jsx 파일에는 export default 가능한 함수는 1개만
3. props : 부모가 넘겨주는 속성 값

<MyComponent title="리액트" content="재밌다!" />

→ 자식에서 props.title, props.content 로 접근
4. JSX 문법에서 JS 코드 사용 시 { } 중괄호 활용

3. 컴포넌트 불러오기

1. 다른 파일일 때

import MyComponent from './MyComponent.jsx';
<MyComponent />

2.같은 파일 내에서

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

4. JSX (JavaScript XML)

정의

• JavaScript 안에서 HTML과 비슷한 문법을 쓸 수 있게 하는 확장 문법
• 브라우저는 JSX를 직접 해석할 수 없음 → React가 JS로 변환 후 가상 DOM을 통해 렌더링

JSX 주의할 점

<input />   // ⭕
<input>     // ❌

1. 닫는 태그 필수

2. 하나의 부모 요소로 감싸야 함

return (
    <div>
      <h1>Hello</h1>
      <p>World</p>
    </div>
);

또는

return (
    <>
      <h1>Hello</h1>
      <p>World</p>
    </>
);

3. 여러 줄 JSX는 소괄호로 묶는 게 관례

return (
    <div>
      <h1>Line 1</h1>
      <h2>Line 2</h2>
    </div>
);

4. JS 표현식만 가능 (변수/연산/함수 호출)

정의부(if, for)는 불가능. 대신 JS 영역에서 처리 후 JSX에 넣음

const name = "홍길동";
return <h1>{name}님 안녕하세요!</h1>;

5. 주석

{ /* JSX 안에서는 이렇게 */ }

5. 컴포넌트 종류

1) 함수형 컴포넌트 (주로 사용)

• 단순하고 가볍다
• React Hook 사용 가능 (useState, useEffect 등)

2) 클래스형 컴포넌트 (옛날 방식, 거의 안 씀)

• class MyComponent extends React.Component
• this.state, this.props 사용

6. Props vs State

구분	Props	State
정의	부모 컴포넌트가 전달하는 값	컴포넌트 내부에서 관리하는 값
변경 가능 여부	읽기 전용 (자식이 변경 불가)	변경 가능 (setState, useState)
용도	외부에서 주입되는 데이터	내부에서 동적으로 바뀌는 데이터