React 학습 노트
1. 파일 구조 기본
| 파일 | 역할 |
|---|---|
global.css | 전체 공통 CSS |
app/layout.js | 루트 레이아웃 (RootLayout) 서버 컴포넌트 |
app/page.js | 첫 화면 Home 컴포넌트 |
2. 컴포넌트란?
재사용 가능하고, 조립 가능한 독립적인 UI 객체. UI가 없는 컴포넌트도 가능하다.
컴포넌트 기본 구조
"use client" // 생략하면 서버 컴포넌트 (기본값은 서버 컴포넌트)
import ...; // 외부 컴포넌트, CSS, JS 모듈 가져오기
function 컴포넌트명({ prop1, prop2, children }) {
return (/* JSX */);
}
export default 컴포넌트명;컴포넌트 판별법
export default function 함수명()→ 컴포넌트export default 함수명;→ 컴포넌트- UI가 있을 수도, 없을 수도 있다
컴포넌트 종류
| 종류 | 설명 |
|---|---|
| 서버 컴포넌트 | 기본값, "use client" 없음 |
| 클라이언트 컴포넌트 | 파일 최상단에 "use client" 필요 |
| 페이지 컴포넌트 | 폴더형 (폴더/page.js), URL 라우팅 대상 |
| UI 컴포넌트 | 싱글 파일, 재사용 가능한 화면 요소 |
3. 라우팅 구조
app/
├── layout.js → RootLayout (항상 고정)
├── page.js → "/" 경로의 Home 컴포넌트
└── about/
└── page.js → "/about" 경로app하위 폴더 = URL 세그먼트(경로)<body>{children}</body>→ URL에 따라 페이지 컴포넌트가 들어오는 자리- 공통 UI 컴포넌트는
common/폴더에서 관리
4. JSX 작성법
자바스크립트에 XML을 추가한 코드. HTML과 비슷하지만 다르다.
핵심 규칙
- 반드시 끝 태그 존재해야 함 (XML 문법)
- 다수의 UI 요소는 하나의 부모 요소로 감싸야 함
class대신className사용- JSX는 모두 자바스크립트로 변환됨
JSX 표현식 { }
// 중괄호 안 = 자바스크립트 코드
<div>{변수}</div>
<div>{조건 ? "참" : "거짓"}</div>
<div className={`고정클래스 ${변수}`}></div>{ }안에서 사용 가능: 변수, 삼항연산자,&&,||- 사용 불가: if문, for문 등 실행문
5. 모듈 시스템
| 종류 | 설명 |
|---|---|
| CommonJS 모듈 | require() / module.exports |
| ES 모듈 | import / export |
.js 파일의 두 가지 역할
- 컴포넌트 - UI를 반환하는 함수
- 모듈 - 공통 함수나 클래스를 정의한 파일
6. 스타일링
인라인 스타일 두 가지 방법
// 방법 1: 변수로 분리
const style = {
backgroundColor: "green",
color: "aqua",
fontSize: "24px",
fontWeight: "bold",
padding: 8 // 숫자만 써도 px 자동 적용
};
<div style={style}>리액트</div>
// 방법 2: 직접 작성 ({{ }} — 바깥은 JSX 표현식, 안은 객체)
<div style={{ backgroundColor: "orange", color: "aqua" }}>리액트</div>⚠️ CSS 속성명은 반드시 camelCase 로 작성 (
background-color❌ →backgroundColor✅)
| 변수로 분리 | 직접 작성 | |
|---|---|---|
| 재사용 | ✅ 여러 곳에 적용 가능 | ❌ 그 자리에만 |
| 동적 변경 | ✅ 변수 조작으로 쉽게 | ❌ 불편 |
| 간단한 스타일 | 오히려 과함 | ✅ 바로 쓰면 편함 |
인라인 스타일을 쓰는 이유
JS 변수/상태(state)와 스타일을 직접 연결할 수 있기 때문
const style = {
backgroundColor: isError ? "red" : "green", // 상태에 따라 동적 변경
fontSize: `${size}px`,
};
<div style={style}>...</div>CSS Modules를 쓰는 이유
프로젝트가 커지고 팀원이 많아질수록 클래스명 충돌이 생기는데,
.module.css를 쓰면 자동으로 고유한 이름으로 변환되어 충돌 걱정 없이 독립적으로 스타일 작업 가능
// 실제 렌더링 결과
// .wrapper → .Header__wrapper__a1b2c (파일명+클래스명+해시)
<div className={`mt-3 ${style.wrapper} ${style.inverted}`}>7. 이벤트 핸들링
// 방법 1: 함수 참조 — 매개값 전달 불가
<button onClick={fun1}>버튼1</button>
// 방법 2: 화살표 함수 — 매개값 전달 가능
<button onClick={() => fun2(매개값)}>버튼2</button>기준: 매개값이 필요하면 화살표 함수, 아니면 함수 참조
⚠️ React 컴포넌트는 DOM 요소가 아니므로 이벤트 속성을 직접 작성할 수 없다.
8. 기타 메모
- 백틱(```)도 자바스크립트 코드 (문자열 + 변수 바인딩)
Image컴포넌트가<img>태그보다 성능이 좋음 (빌드 시 최적화)- 개발자도구 콘솔 경고를 최대한 없애는 것이 성능에 유리
자바스크립트 암시적 true/false (Truthy / Falsy)
자바스크립트는 조건식에서 boolean이 아닌 값도 자동으로 true/false로 해석해.
| Falsy (false로 취급) | Truthy (true로 취급) |
|---|---|
0 | 0 이외의 숫자 |
"" (빈 문자열) | 비어있지 않은 문자열 |
null | 배열 [] |
undefined | 객체 {} |
NaN | 그 외 대부분의 값 |
false |
// JSX에서 &&로 조건부 렌더링할 때 활용
const name = "안녕";
<div>{name && <span>{name}</span>}</div> // name이 truthy면 렌더링
// ⚠️ 0은 falsy지만 JSX에서 숫자 0은 그대로 출력되므로 주의
const count = 0;
<div>{count && <span>있음</span>}</div> // "0" 이 출력돼버림!
// → 해결: {count > 0 && <span>있음</span>}container vs container-fluid (Bootstrap)
| 클래스 | 동작 |
|---|---|
container | 화면 크기에 따라 최대 너비가 고정됨 (반응형 중앙 정렬) |
container-fluid | 항상 화면 전체 너비 100% 차지 |
안녕하세요