React의 핵심인 컴포넌트를 만드는 법과, 이를 위해 사용하는 JSX 문법을 완벽히 익힌다.
1.1. 컴포넌트와 JSX의 관계
1.1.1. 컴포넌트란?
컴포넌트(Component)는 React에서 UI를 만드는 기본 단위다. 레고 블록처럼 작은 부품들을 조립해서 전체 화면을 만든다고 생각하면 된다.
자바스크립트 함수: React 컴포넌트는 그냥 자바스크립트 함수다
UI 반환: 이 함수는 화면에 그릴 내용을 반환한다
재사용 가능: 한 번 만들면 여러 곳에서 사용할 수 있다
1.1.2. JSX란?
JSX(JavaScript XML)는 자바스크립트 안에서 HTML처럼 생긴 코드를 작성할 수 있게 해주는 문법이다.
HTML + JavaScript: HTML 구조 안에 자바스크립트 코드를 넣을 수 있다
변환 필요: 브라우저는 JSX를 이해 못함 → Vite(Babel)가 일반 JS로 변환
문법 설탕: 실제로는 React.createElement() 함수 호출로 변환됨
1.1.3. 둘의 관계
Tip: 핵심 개념:
컴포넌트는 "무엇"이고, JSX는 "어떻게"다.
• 컴포넌트: UI를 만드는 함수 (설계도)
• JSX: 컴포넌트 안에서 UI를 표현하는 문법 (재료와 조립법)
컴포넌트는 JSX를 반환(return)함으로써 화면에 무엇을 그릴지 정의한다.
// 컴포넌트: Greeting이라는 함수
function Greeting() {
// JSX: 이 컴포넌트가 그릴 UI를 JSX 문법으로 작성
return <h1>안녕하세요!</h1>;
}
// 위 JSX는 실제로 이렇게 변환됨
function Greeting() {
return React.createElement('h1', null, '안녕하세요!');
}
1.2. 컴포넌트 완전 정복
1.2.1. 컴포넌트의 기본 구조
React 컴포넌트는 함수형 컴포넌트를 기본으로 사용한다. (과거에는 클래스형도 있었지만 지금은 거의 사용 안 함)
// 가장 간단한 컴포넌트
function Hello() {
return <div>안녕!</div>;
}
// 화살표 함수로도 작성 가능
const Hello = () => {
return <div>안녕!</div>;
};
// return이 한 줄이면 괄호 생략 가능
const Hello = () => <div>안녕!</div>;
1.2.2. 컴포넌트 작성 규칙 (매우 중요!)
Tip: 규칙 1: 대문자로 시작
컴포넌트 이름은 반드시 대문자로 시작해야 한다.
올바른 예: Header, MyButton, UserProfile
잘못된 예: header, myButton, userProfile
이유: React는 소문자로 시작하면 일반 HTML 태그로 인식한다. <div>는 HTML div 태그, <Div>는 Div 컴포넌트
Tip: 규칙 2: JSX 반환
함수는 반드시 JSX를 return해야 한다. 아무것도 반환하지 않으면 오류 발생.
// 올바른 예
function Button() {
return ;
}
// 오류 발생 – 아무것도 반환 안 함
function Button() {
console.log("버튼");
}
> **Tip**: **규칙 3: 파일당 하나의 기본 내보내기**
>
> 다른 파일에서 사용하려면 `export default`로 내보내야 한다.
>
> ```jsx
// Button.jsx
function Button() {
return <button>클릭</button>;
}
export default Button; // 다른 파일에서 import 가능
// 또는 한 줄로
export default function Button() {
return <button>클릭</button>;
}
1.2.3. 컴포넌트 사용하기
만든 컴포넌트는 HTML 태그처럼 사용한다. 이를 "컴포넌트 렌더링"이라고 한다.
// Button 컴포넌트 정의
function Button() {
return <button>클릭하세요</button>;
}
// App 컴포넌트에서 Button 사용
function App() {
return (
<div>
<h1>내 앱</h1>
<Button /> {/* Button 컴포넌트를 HTML 태그처럼 사용 */}
<Button /> {/* 여러 번 재사용 가능 */}
</div>
);
}
1.2.4. 컴포넌트 안에서 로직 작성하기
컴포넌트는 자바스크립트 함수이므로, return 전에 일반 JS 코드를 작성할 수 있다.
function Greeting() {
// return 전에 자바스크립트 로직 작성
const name = "철수";
const hour = new Date().getHours();
const greeting = hour < 12 ? "좋은 아침" : "안녕하세요";
// JSX에서 변수 사용
return (
<div>
<h1>{greeting}, {name}님!</h1>
<p>현재 시각은 {hour}시입니다.</p>
</div>
);
}
Tip: [실습 1] 자기소개 컴포넌트 만들기
src/Profile.jsx 파일을 만들고 다음 내용을 작성:
function Profile() {
const name = "홍길동";
const age = 25;
const hobby = "독서";
## 1.4. 컴포넌트 분리 실습
하나의 파일(App.jsx)에 모든 코드를 넣는 것은 좋지 않다. 역할별로 파일을 나누면 코드 관리가 쉬워진다.
- **재사용성:** 한 번 만든 컴포넌트를 여러 곳에서 사용
- **유지보수:** 문제가 생기면 해당 컴포넌트 파일만 수정
- **협업:** 팀원들이 각자 다른 컴포넌트를 작업 가능
- **테스트:** 개별 컴포넌트를 독립적으로 테스트 가능
> **Tip**: **언제 분리해야 할까?**
>
> 1. **재사용될 것 같은 UI:** 버튼, 카드, 입력 폼 등
> 2. **독립적인 기능:** 로그인 폼, 검색 바, 장바구니 등
> 3. **너무 길어진 컴포넌트:** 100줄 이상이면 분리 고려
> 4. **명확한 책임이 있는 UI:** 헤더, 푸터, 사이드바 등
> **Tip**: **[실습 3] 컴포넌트 분리하기**
>
> **1단계: 컴포넌트 파일 생성**
>
> **src/Header.jsx**
> ```jsx
function Header() {
return (
<header style={{
backgroundColor: '#282c34',
padding: '20px',
color: 'white'
}}>
<h1>내 웹사이트</h1>
<nav>
<a href="#home" style={{ color: 'white', margin: '0 10px' }}>홈</a>
<a href="#about" style={{ color: 'white', margin: '0 10px' }}>소개</a>
<a href="#contact" style={{ color: 'white', margin: '0 10px' }}>연락</a>
</nav>
</header>
);
}
export default Header;