✅ React 기초 강좌

🎯 학습 목표

• 조건에 따라 JSX를 렌더링하는 방법을 이해한다.
• 배열을 기반으로 컴포넌트를 반복 렌더링하는 방법을 익힌다.
• key 속성의 중요성을 이해한다.

✅ 조건부 렌더링 (Conditional Rendering)

1. 삼항 연산자

const isLoggedIn = true;
return <p>{isLoggedIn ? '환영합니다!' : '로그인해주세요'}</p>;

2. 논리 연산자 (&&)

const hasNewMessage = true;
return <p>{hasNewMessage && '새로운 메시지가 도착했습니다!'}</p>;

3. if 문 사용 (JSX 바깥에서)

let content;
if (isLoggedIn) {
  content = <p>로그아웃</p>;
} else {
  content = <p>로그인</p>;
}
return <div>{content}</div>;

✅ 리스트 렌더링 (List Rendering)

React에서는 배열의 .map() 메서드를 사용해 컴포넌트를 반복 렌더링합니다.

const fruits = ['🍎', '🍌', '🍇'];

return (
  <ul>
    {fruits.map((fruit, index) => (
      <li key={index}>{fruit}</li>
    ))}
  </ul>
);

🔐 key 속성의 중요성

• key는 React가 각 항목을 식별하고 렌더링 성능을 최적화하기 위해 필요합니다.
• 가능하면 고유한 ID를 사용하세요. index는 정렬이나 삭제가 없을 때만 사용 권장.

✍️ 실습 예제: Todo List 출력

const todos = ['공부하기', '운동하기', '책 읽기'];

return (
  <ul>
    {todos.map((todo, i) => (
      <li key={i}>{todo}</li>
    ))}
  </ul>
);

✅ 과제

1. TaskList 컴포넌트를 만들어보세요.

• tasks 배열이 주어졌을 때, 항목을 <ul>로 출력
• tasks.length === 0이면 "할 일이 없습니다." 문구 출력

const tasks = ['할 일 1', '할 일 2', '할 일 3'];

출력 예시:

- 할 일 1
- 할 일 2
- 할 일 3

또는

할 일이 없습니다.