섹션 7. 반복 렌더링과 조건부 렌더링

조건부 렌더링 - if

조건부 렌더링 : 조건에 따라 적절한 UI를 렌더링하는 것

 

조건문과 조건부 렌더링

• 조건문
  • 조건을 처리하기 위한 문법
• 조건부 렌더링
  • 조건문을 활용한 렌더링 기법

 

조건에 따라 다른 컴포넌트를 렌더링 

// App.tsx

import GuestView from "./components/GuestView";
import UserInfoView from "./components/UserInfoView";
import UserView from "./components/UserView";

export default function App() {

  const isLoggedIn = true;

  if (isLoggedIn) {
    return (
      <>
        <UserView />
        <UserInfoView />
      </>
    );
  } else {
    return <GuestView />
  };

}

 

컴포넌트에 props를 넘겨 props의 조건에 따라 처리 가능 

// App.tsx

import Greeting from "./components/Greeting";

export default function App() {

  const isLoggedIn = true;

  return <Greeting isLoggedIn={isLoggedIn} />

}

// Greeting.tsx

import GuestView from "./GuestView";
import UserInfoView from "./UserInfoView";
import UserView from "./UserView";

export default function Greeting ({isLoggedIn}: {isLoggedIn: boolean}) {

  if (isLoggedIn) {
    return (
      <>
        <UserView />
        <UserInfoView />
      </>
    );
  } else {
    return <GuestView />
  }
}

 

* null을 리턴할 시, 아무것도 렌더링하지 않음 

 

조건부 렌더링 - switch

// App.tsx

import StatusMessage from "./components/StatusMessage";

export default function App() {

  const status = "loading";

  return (
    <>
      <StatusMessage status={status}/>
    </>
  );
}

// StatusMessage.tsx

export default function StatusMessage ({ status }: { status: string}) {

  // loading, success, error, default

  switch(status) {
    case "loading":
      return <h1>Loading...</h1>;
    case "success":
      return <h1>Data loaded successfully!</h1>;
    case "error":
      return <h1>Error fetching data!</h1>;
    default:
      return <h1>unknown status</h1>;
  }
}

 

조건부 렌더링 - 삼항 연산자

조건 ? true : false

 

삼항 연산자는 return 문 안에서 중괄호를 사용하여 나타냄 

// App.tsx


export default function App() {

  const isLoggedIn = true;

  return (
    <>
      <h1>{isLoggedIn ? "Welcome Back" : "Please Sign Up"}</h1>
    </>
  );
}

 

삼항 연산자 결과값으로 컴포넌트 자체를 리턴 가능 

// App.tsx

import GuestView from "./components/GuestView";
import UserView from "./components/UserView";

export default function App() {

  const isLoggedIn = true;

  return (
    <>
      <h1>{isLoggedIn ? <UserView /> : <GuestView /> }</h1>
    </>
  );
}

 

조건부 렌더링 - && 연산자

expr1 && expr2

: 왼쪽 피연산자가 참일 경우 오른쪽 피연산자를 실행

 

&& 연산자는 return 문 안에서 중괄호를 사용하여 나타냄

// App.tsx

export default function App() {

  const isLoggedIn = false;

  return (
    <>
      {isLoggedIn && <h1>Welcome Back!</h1>}
      {!isLoggedIn && <h1>Please Sign Up!</h1>}
    </>
  );
}

 

&& 연산자 결과값으로 컴포넌트 자체를 리턴 가능

 

반복 렌더링 - for

반복 렌더링 : 데이터 배열을 기반으로 UI 요소를 여러 번 렌더링하는 패턴을 의미

 

반복문과 반복 렌더링

• 반복문
  • 반복을 처리하기 위한 문법
• 반복 렌더링 
  • 반복문을 활용한 렌더링 기법

 

배열 요소 안의 단순한 문자열 데이터를 가공

--> JSX 요소가 담긴 새로운 배열 생성

--> 이것을 활용하여 반복 렌더링 구현 

export default function App() {

  const fruits = ["apple", "banana", "orange"];
  const items = [];

  for (let i = 0; i < fruits.length; i++) {
    items.push(<li key={i}>{fruits[i]}</li>); // 고유한 key를 가진 새로운 JSX 요소 배열 생성
  }

  return (
    <>
      <p>Fruits Lists</p>
      <ul>
        {items}
      </ul>
    </>
  );
}

 

반복 렌더링을 사용할 때는 그 개별 요소를 구현할 수 있는 key라는 props가 필요

ㄴ React가 요소를 구분할 수 있게 고유한 값을 key 속성에 할당해주어야 함

 

반복 렌더링 - map

React에서는 for 문보다 map 메소드를 사용하여 새로운 배열을 만들어내는 방법을 권장

 

map 메소드 : 기존의 배열을 순회하여 새로운 배열을 만들게 하는 배열 내장 객체 메소드 

map 메소드는 내부적으로 callbackfn을 전달받음 

ㄴ 콜백 function은 배열의 요소의 개수만큼 실행됨 

 

콜백 function의 매개변수

1. 순회했을 때 접근하는 현재 요소의 값
2. 인덱스 번호

 

// App.tsx

export default function App() {
  const fruits = ["apple", "banana", "orange"];

  return (
    <>
      <p>Fruits Lists</p>
      <ul>
        {fruits.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
    </>
  );
}

 

key 속성 고유하게 하기

key 속성은 반복해서 렌더링되는 요소들 사이에서 반드시 고유해야 함

== 배열의 항목이 추가되거나 삭제되더라도 key의 값이 변하지 않아야 함 

∴ index 번호를 key 값으로 사용하는 것은 위험 

 

// App.tsx

import { useState } from "react";
import { v4 as uuidv4 } from "uuid";

export default function App() {
  const items = ["apple", "banana", "orange"];
  const [fruits, setFruits] = useState(() =>
    items.map((item) => ({ // 기존의 item을 가공해 새로운 배열을 만듦
      id: uuidv4(), // uuid 함수를 호출하여 id에 고유한 값을 대입 
      value: item,
    }))
  );
  const handleAddFruit = () => {
    setFruits([{ id: uuidv4(), value: "grape" }, ...fruits]);
  };
  return (
    <>
      <p>Fruits Lists</p>
      <ul>
        {fruits.map((fruit) => (
          <li key={fruit.id}>
            <input type="text" placeholder={fruit.value} />
          </li>
        ))}
      </ul>
      <button onClick={handleAddFruit}>추가</button>
    </>
  );
}

 

key 속성의 유효 범위

key 값의 유효 범위는 해당 반복 렌더링에서만 유효

== 하나의 반복 렌더링에서만 key 값이 중복되지 않으면 됨

(지역변수 느낌..?)

 

filter

filter 메소드 : 특정 배열의 요소를 필터링할 때 사용하는 메소드

ㄴ 보통 반복 렌더링하기 전에 데이터를 걸러내는 용도로 사용 

 

// App.tsx

import { useState } from "react";

export default function App() {
  // 초기 데이터를 설정
  const [items, setItems] = useState([
    { id: 1, name: "Apple", category: "Fruit" },
    { id: 2, name: "Carrot", category: "Vegetable" },
    { id: 3, name: "Banana", category: "Fruit" },
    { id: 4, name: "Tomato", category: "Vegetable" },
  ]);

  return (
    <>
      <h1>Items List</h1>
      <ul>
        {items
          .filter((item) => item.category === "Vegetable")
          .map((item) => ( 
            <li key={item.id}>
              {item.category} - {item.name}
            </li>
          ))}
      </ul>
    </>
  );
}

^ category가 Vegetable인 요소만 필터링하여 map을 사용해 새로운 배열을 만드는 코드 

 

// App.tsx

import { useState } from "react";

export default function App() {
  // 초기 데이터를 설정
  const [items, setItems] = useState([
    { id: 1, name: "Apple", category: "Fruit" },
    { id: 2, name: "Carrot", category: "Vegetable" },
    { id: 3, name: "Banana", category: "Fruit" },
    { id: 4, name: "Tomato", category: "Vegetable" },
  ]);

  const handleDelete = (id: number) => {
    // 클릭한 요소의 id와 같지 않은 요소들로 새로운 배열 구성 
    setItems((items) => items.filter((item) => item.id !== id));
  }

  return (
    <>
      <h1>Items List</h1>
      <ul>
        {items
          .map((item) => ( 
            <li key={item.id}>
              {item.category} - {item.name}
              <button onClick={() => handleDelete(item.id)}>Delete</button>
            </li>
          ))}
      </ul>
    </>
  );
}

^ 버튼을 클릭하여 특정 요소만 지워지도록 하는 코드