React – JSX와 렌더링 – JSX 문법 – 2 – 조건문 (if, 삼항), 반복문 (map) 활용

작성자 wooah
React – JSX와 렌더링 – JSX 문법 – 2 – 조건문 (if, 삼항), 반복문 (map) 활용

React – JSX와 렌더링 – JSX 문법 – 2 – 조건문 (if, 삼항), 반복문 (map) 활용

안녕하세요, 여러분! 😊
이번 시간에는 React의 핵심 기능 중 하나인 조건 렌더링과 반복 렌더링에 대해 알아볼게요. JSX는 마치 레고 블록처럼 유동적인 화면을 구성할 수 있게 해주는데요, 그 중심에는 바로 조건문과 반복문이 있습니다!

1. 조건문 – 화면을 상황에 따라 다르게 보여주기

React에서는 if문을 직접 JSX 안에서 쓸 수는 없지만, JSX 바깥에서는 얼마든지 사용 가능해요!
또한 JSX 내부에서는 삼항 연산자와 && 조건 연산자를 자주 활용합니다.

📌 1-1. if문으로 조건 처리 (JSX 바깥에서)

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;

  if (isLoggedIn) {
    return <h1>환영합니다, 사용자님!</h1>;
  }
  return <h1>로그인이 필요합니다.</h1>;
}

👉 Greeting 컴포넌트는 isLoggedIn 값에 따라 다른 메시지를 보여줘요.

JSX 안에서는 if 문을 사용할 수 없으니, 조건에 따라 다른 컴포넌트를 반환할 땐 JSX 바깥에서 처리해줘야 해요!

📌 1-2. 삼항 연산자 ? : 사용

JSX 내부에서 조건에 따라 태그를 바꿔야 한다면 삼항 연산자를 활용하세요!

function Greeting({ isMember }) {
  return (
    <div>
      {isMember ? <p>👑 멤버 전용 콘텐츠입니다.</p> : <p>🙋‍♀️ 일반 사용자입니다.</p>}
    </div>
  );
}

➡️ isMember가 true일 땐 멤버 전용 메시지, 아니면 일반 사용자 메시지를 보여줘요.

📌 1-3. && 연산자 활용 (조건이 참일 때만 렌더링)

function Alarm({ hasNewMessage }) {
  return (
    <div>
      <h1>알림함</h1>
      {hasNewMessage && <p>📩 새로운 메시지가 있습니다!</p>}
    </div>
  );
}
  • hasNewMessage가 true일 때만 <p> 태그가 출력돼요.
  • false, null, undefined는 화면에 아무 것도 나타나지 않아요.

📌 1-4. 조건에 따른 컴포넌트 구분 렌더링

function Page({ isAdmin }) {
  const AdminView = <h2>관리자 페이지에 오신 걸 환영합니다.</h2>;
  const UserView = <h2>일반 사용자 페이지입니다.</h2>;

  return (
    <div>
      {isAdmin ? AdminView : UserView}
    </div>
  );
}

조건에 따라 컴포넌트를 미리 선언해두고 JSX에서 선택적으로 넣는 방식도 매우 깔끔해요.

2. 반복문 – 다수의 항목을 리스트로 렌더링하기

React에서는 for 문을 JSX 안에서 직접 사용할 수 없기 때문에 보통은 Array.prototype.map()을 사용해서 요소를 반복 출력합니다.

📌 2-1. map() 함수로 리스트 만들기

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

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}
  • map() 함수는 배열을 순회하면서 각 항목에 대해 JSX 엘리먼트를 반환합니다.
  • key 속성은 반드시 고유한 값으로 지정해주세요! (없으면 콘솔 경고 발생)

📌 2-2. 객체 배열 반복

const users = [
  { id: 1, name: '철수' },
  { id: 2, name: '영희' },
  { id: 3, name: '민수' },
];

function UserList() {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}님 안녕하세요!</li>
      ))}
    </ul>
  );
}

객체 배열에서 key는 보통 id 같은 고유 식별자를 사용하는 것이 좋아요!

📌 2-3. JSX 조건과 반복을 조합하기

function TodoList({ todos }) {
  return (
    <ul>
      {todos.length === 0 ? (
        <li>할 일이 없어요! 🎉</li>
      ) : (
        todos.map(todo => <li key={todo.id}>{todo.text}</li>)
      )}
    </ul>
  );
}

조건에 따라 “할 일 없음” 메시지를 보여줄지, 리스트를 보여줄지 선택적으로 표현할 수 있어요!

3. JSX에서는 if와 for를 직접 쓸 수 없다는 점 꼭 기억하세요!

사용 가능 설명
? : 삼항 연산자 JSX 내부에서 조건 분기 표현 가능
&& 조건 연산자 참일 때만 렌더링
.map() 반복문 배열을 JSX 리스트로 표현
외부 if, for JSX 바깥에서만 사용 가능

💡 JSX 조건/반복문 작성 팁

상황 추천 방식
간단한 조건 처리 삼항 연산자 (? :)
특정 조건일 때만 출력 &&
목록 출력 map() 사용 + key 지정
복잡한 조건 로직 JSX 바깥에서 처리 후 컴포넌트로 반환

예제: 조건과 반복을 함께 활용한 컴포넌트

function ChatList({ chats }) {
  return (
    <div>
      <h2>채팅 목록</h2>
      {chats.length === 0 ? (
        <p>채팅이 없습니다.</p>
      ) : (
        <ul>
          {chats.map(chat => (
            <li key={chat.id}>
              <strong>{chat.user}</strong>: {chat.message}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

주의할 점 정리

항목 주의사항
JSX 안에서 if나 for 직접 사용 불가 대신 조건 표현식과 map() 사용
반복 요소엔 반드시 key 속성 중복되면 리렌더링 오류 발생
너무 복잡한 조건은 함수 밖에서 처리 JSX가 너무 길어지면 가독성 저하
null, false 등은 렌더링되지 않음 조건이 거짓이면 자연스럽게 무시됨

마무리하며

조건문과 반복문은 동적인 UI 구성의 핵심이에요.
JSX 문법의 한계도 있지만, 삼항 연산자, &&, map() 함수만 잘 활용하면 충분히 유연한 화면 구성이 가능하답니다!

이제 여러분은 React에서 사용자에 따라 콘텐츠를 바꾸고, 데이터 목록을 동적으로 화면에 뿌리는 강력한 능력을 갖추게 되었어요! 🎉

다음 글부터는 본격적으로 컴포넌트를 렌더링하는 방식에 대해 배워볼 거예요.
이제 한 단계 더 깊이 들어가 볼 준비 되셨죠? 🚀

답글 남기기