지난주에는 React에서 매일 쓰는 ES6+ 문법을 집중적으로 배웠습니다. 핵심만 빠르게 짚어보겠습니다.
map: 각 요소를 변환 → 새 배열 반환. React에서 리스트
렌더링의 핵심filter: 조건 충족 요소만 → 더 짧은 새 배열. 상품 목록
필터링 등reduce: 배열 → 하나의 값. 합계, 그룹핑, 장바구니 금액 계산
등const products = [
{ name: "사과", price: 1000, inStock: true },
{ name: "바나나", price: 500, inStock: false },
{ name: "포도", price: 3000, inStock: true },
];
// 재고 있는 상품만 → 이름만 추출
products.filter((p) => p.inStock). p
const { name, age } = user — React props 수신
시 매일 사용const [count, setCount] = useState(0) —
useState 반환값// React props 수신 패턴
function UserCard({ name, age, isAdmin = false }) {
// 기본값 설정까지 한 번에
return (
<div>
{name} ({age}세) {isAdmin && "👑"}
</div>
);
}
{ ...prev, age: 26 } — 불변 패턴. useState에서
객체 상태 업데이트 시 핵심?.: user?.address?.city — null/undefined 안전 접근. API
응답 처리 시 필수??: user.age ?? "나이 미입력" — null/undefined만 폴백.
||와 달리 0·''도 통과Q1. 아래 코드에서 재고 있는 상품 이름 목록을 만들어보세요 — filter + map 체이닝
const products = [
{ name: "사과", price: 1000, inStock: true },
{ name: "바나나", price: 500, inStock: false },
{ name: "포도", price: 3000, inStock: true },
];
// filter로 inStock이 true인 것만 → map으로 name만 추출
const availableNames = products.filter((p) => p.inStock p
const user = { name: "철수", age: 25 };
const { name, age, role = "guest" } = user;
// role → 'guest' (user 객체에 role이 없으므로 기본값 적용)
?.와 ?? 조합 — user.profile이 없을 때 안전하게 처리const user = { name: "영희" };
// user.profile이 없으면 안전하게 undefined 반환, ?? 로 기본값 적용
const bio = user?.profile?.bio ?? "소개글이 없습니다";
// "소개글이 없습니다"
React는 Facebook이 만든 UI를 만들기 위한 JavaScript 라이브러리 입니다. 지금까지 배운 JS를 그대로 쓰되, UI를 컴포넌트 단위로 나눠서 만드는 방식을 따릅니다.
컴포넌트는 재사용 가능한 UI 조각입니다. 함수형 컴포넌트는 props를 입력받아 JSX(화면 구조)를 반환하는 JS 함수입니다.
// 가장 단순한 컴포넌트
function Greeting() {
return <h1>안녕하세요!</h1>;
}
// 컴포넌트를 조합해서 사용
function App() {
return (
<div>
<Greeting />
<Greeting />
</div>
);
}
컴포넌트 이름이 소문자이면 React는 HTML 태그로 인식합니다. 컴포넌트는 반드시 대문자로 시작해야 합니다.
JSX는 JS 안에서 HTML처럼 작성하는 문법입니다. 실제로는 React.createElement() 호출로 변환됩니다. 바벨(Babel)이 이 변환을 담당합니다.
// JSX 문법
const element = <h1 className="title">안녕하세요</h1>;
// 바벨이 변환하는 실제 코드
const element = React.createElement("h1", { className: "title" }, "안녕하세요");
// 1. JS 표현식은 {} 안에 작성
const name = "철수";
<h1>안녕하세요, {name}님!</h1>;
<p>1 + 1 = {1 + 1}</p>;
// 2. class 대신 className (class는 JS 예약어)
<div className="container">내용</div>;
// 3. 반드시 하나의 루트 요소로 감싸야 함
// 잘못된 예
return (
<h1>제목</h1>
props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다. 읽기 전용입니다 — 자식은 props를 수정할 수 없습니다.
// 부모 → 자식으로 데이터 전달
function App() {
return <UserCard name="김철수" age={25} isAdmin={true} />;
}
// 자식 컴포넌트에서 props 수신 (구조 분해 권장)
function UserCard({ name, age, isAdmin }) {
return (
<div>
<h2>
{nameageconst users = [
{ id: 1, name: "철수", role: "admin" },
{ id: 2, name: "영희", role: "user" },
];
function App() {
return (
<ul>
{users.map((user) => (
// key는 React가 리스트를 효율적으로 업데이트하는 데 필요
리스트 렌더링 시 key prop이 필수입니다. key가 없으면 경고가
발생하고 성능 문제가 생깁니다. key는 리스트 안에서 고유한 값이어야 하며, 보통
데이터의 id를 사용합니다.
Q1. 아래 요구사항을 만족하는 Counter 컴포넌트를 만들어보세요. (1) + 버튼을
누르면 숫자가 1 올라감 (2) - 버튼을 누르면 숫자가 1 내려감 (3) 초기값은 0
(4) 함수형 업데이트(prev ={">"} ...)를 사용할 것
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount((prev) => prev + 1)}>+</button>
useState로 count 상태를 관리하고, 버튼의 onClick 핸들러에서 setCount를
호출합니다. 함수형 업데이트(prev => prev + 1)를 사용하면
항상 최신 상태를 기반으로 업데이트됩니다.
Q2. users 배열을 props로 받아 이름 목록을 렌더링하는 UserList 컴포넌트를
만들어보세요. key prop도 올바르게 사용해야 합니다.
function UserList({ users }) {
return (
<ul>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
map()으로 배열을 순회하면서 각 요소를 <li>로 변환합니다.
key에는 배열 인덱스가 아닌 고유한 id를 사용합니다. 이
패턴은 React에서 가장 자주 사용하는 리스트 렌더링 방식입니다.
Q3. isLoggedIn boolean prop을 받아서 true이면 <Dashboard />
컴포넌트를, false이면 <Login /> 컴포넌트를 렌더링하는 AuthGate
컴포넌트를 작성해보세요.
function Dashboard() {
return <h1>대시보드입니다</h1>;
}
function Login() {
return <h1>로그인해주세요</h1>;
}
function AuthGate({ isLoggedIn }) {
return isLoggedIn ? <Dashboard /> : <Login />;
}
삼항 연산자(조건 ? A : B)를 사용한 조건부 렌더링 패턴입니다. 실제
프로젝트에서 인증 상태에 따라 다른 화면을 보여줄 때 이 패턴을 자주 사용합니다.
컴포넌트는 재사용 가능한 UI 조각입니다. 함수형 컴포넌트는 props를 입력받아 JSX(화면 구조)를 반환하는 JS 함수입니다. 레고 블록처럼 작은 컴포넌트를 조합해서 복잡한 UI를 만듭니다.
면접 팁: "컴포넌트는 단일 책임 원칙을 따르는 것이 좋습니다. 한 컴포넌트가 너무 많은 역할을 하면 재사용성과 테스트 가능성이 떨어집니다"라고 더하면 좋습니다.
JSX는 JS 안에서 HTML처럼 UI를 작성하는 문법 확장입니다. 내부적으로 React.createElement() 호출로 변환됩니다. UI 구조를 직관적으로 표현할 수 있고, JS 표현식을 로 바로 삽입할 수 있어서 조건부 렌더링, 리스트 렌더링이 편합니다.
props는 부모 컴포넌트가 자식에게 전달하는 데이터입니다. 자식은 읽을 수만 있고 수정할 수 없습니다. state는 컴포넌트 자신이 관리하는 내부 데이터입니다. state가 변경되면 컴포넌트가 리렌더링됩니다. state는 다음 주에 자세히 다룹니다.
다음 주에는 React의 핵심인 상태 관리(useState)와 사이드 이펙트(useEffect)를 배웁니다. 컴포넌트가 어떻게 값을 기억하고, 데이터를 불러오는지를 배우면 진짜 앱을 만들 수 있게 됩니다.
아래 챕터를 읽어오세요. 이번 주에 배운 useState와 어떻게 연결되는지 생각하며 읽으면 좋습니다.