레슨 1 / 9·15분

React와 JSX

React와 JSX 소개

React는 Meta(구 Facebook)가 만든 UI 라이브러리로, 컴포넌트 단위로 화면을 구성합니다. JSX(JavaScript XML)는 JavaScript 안에서 HTML과 유사한 문법을 작성할 수 있게 해주는 확장 문법입니다. JSX는 결국 React.createElement() 호출로 변환되지만, 훨씬 직관적으로 UI를 표현할 수 있습니다.

JSX 기본 문법

JSX에서는 HTML과 비슷하지만 몇 가지 차이가 있습니다. class 대신 className을 사용하고, 모든 태그는 닫혀야 하며, JavaScript 표현식을 {}(중괄호)로 감싸서 삽입합니다.

tsx

function Greeting() {
  const name = '개발자';
  const today = new Date().toLocaleDateString('ko-KR');

  return (
    <div className="greeting">
      <h1>안녕하세요, {name}님!</h1>
      <p>오늘 날짜: {today}</p>
      <p>1 + 1 = {1 + 1}</p>
      <img src="/avatar.png" alt="프로필" />
    </div>
  );
}

조건부 렌더링

JSX 안에서 조건에 따라 다른 UI를 보여줄 수 있습니다. 삼항 연산자(? :)나 논리 AND 연산자(&&)를 주로 사용합니다.

tsx

function UserStatus({ isLoggedIn }: { isLoggedIn: boolean }) {
  return (
    <div>
      {/* 삼항 연산자: 참/거짓 두 경우 모두 렌더링 */}
      {isLoggedIn ? (
        <p>환영합니다!</p>
      ) : (
        <p>로그인해 주세요.</p>
      )}

      {/* && 연산자: 조건이 참일 때만 렌더링 */}
      {isLoggedIn && <button>로그아웃</button>}
    </div>
  );
}

리스트 렌더링

tsx

function FruitList() {
  const fruits = ['사과', '바나나', '딸기', '포도'];

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

💡

리스트를 렌더링할 때 각 항목에 고유한 key prop을 반드시 지정해야 합니다. React는 key를 사용해 어떤 항목이 변경, 추가, 삭제되었는지 효율적으로 판단합니다. 배열 인덱스보다는 고유한 ID를 key로 사용하는 것이 좋습니다.

←과정 목록 다음: 컴포넌트와 Props→