React (리스트 렌더링과 조건부 렌더링)

Jeonghun·2023년 5월 25일

목록 보기

4/21

React의 리스트 렌더링과 조건부 렌더링

- 리스트 렌더링

🤔 React에서는 리스트를 어떤식으로 렌더링 할까?
React에서 배열의 데이터를 이용하여 여러 요소를 렌더링하는 방법은 매우 자주 사용되는 패턴이다. React를 사용한 웹 개발에 있어서 리스트 렌더링과 조건부 렌더링은 핵심 기능 중 하나이며, 이를 위해 React에서는 JaveScript의 배열 메서드인 'map', 'filter' 등을 이용할 수 있다.

📌 'map' 메서드를 이용한 리스트 렌더링

React에서는 JavaScript의 'map' 메서드를 이용해 배열을 JSX 요소로 렌더링할 수 있다. 'map' 메서드는 배열의 각 항목에 대해 주어진 함수를 실행하고, 그 결과로 새로운 배열을 생성한다. 아래 예시 코드를 통해 확인해보자.

// dummy 데이터
const fruits = ['apple', 'banana', 'orange'];

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

export default FruitList;

위의 코드에서는 fruits 배열의 각 항목을 JSX <li> 요소로 변환하고 있다. 변환 함수는 배열의 각 항목과 해당 항목의 인덱스를 인수로 받아서, 새로운 <li> 요소를 반환한다. 이를 통해 배열의 모든 요소가 목록의 아이템으로 변환된다.

📌 'filter' 메서드를 이용한 리스트 렌더링

JavaScript의 'filter' 메서드를 이용하면, 특정 조건을 만족하는 항목만을 선택하여 새로운 배열을 만들 수 있다. 이를 이용해 조건에 따라 리스트를 필터링할 수 있다.

import React from 'react';

function GroceryList() {
  const groceries = [
    { id: 1, name: 'Apple', isBought: true },
    { id: 2, name: 'Banana', isBought: false },
    { id: 3, name: 'Cherry', isBought: true },
  ];

  const unboughtGroceries = groceries.filter(item => !item.isBought);

  return (
    <ul>
      {unboughtGroceries.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default GroceryList;

위 코드에서는 'filter' 메서드를 사용하여 isBought 속성이 false인 즉, 구매되지 않은 식료품만을 선택하여, 이를 'map' 메서드를 통해 렌더링한다.

- React 배열의 key 속성

🤔 잠깐, 저기 저 key는 뭐지?
위에서 작성한 예시 코드를 살펴보면 기존 JavaScript에서 배열 메서드를 사용할 땐 볼 수 없었던 속성을 찾아볼 수 있는데, 그것은 바로 'key' 속성이다. React에서 리스트를 렌더링할 때는 각 항목에 고유한 key 속성을 제공해야 한다. key 속성은 React가 어떤 항목을 변경, 추가, 또는 삭제할지 식별하는 것을 돕는 역할을 한다. 이 때, key 속성은 해당 데이터가 가지는 고유한 값을 사용하며, 일반적으로 데이터의 ID를 key로 사용하나, 리스트 항목에 고유한 ID가 없는 경우에는 항목의 인덱스를 key로 사용할 수 있다.

📌 배열의 'key'

import React from 'react';

function GroceryList() {
  const groceries = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Cherry' },
  ];

  return (
    <ul>
      {groceries.map(item => (
        // key 속성으로 각 item의 id를 부여
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default GroceryList;

위의 코드에서는 각 항목의 id를 key로 사용하고 있다. 이 방식을 사용하면 항목이 추가, 변경, 삭제될 때마다 React가 항목을 정확히 식별할 수 있어, 성능을 향상시키고 예기치 않은 렌더링 이슈를 방지할 수 있다.

- 조건부 렌더링

🤔 화면에 출력되는 데이터를 조건에 따라 변경할 순 없을까?
React에서 조건에 따라 화면에 렌더링 되는 값을 변경할 수 있는데, 이를 조건부 렌더링이라고 한다. 조건부 렌더링은 말 그대로 어떤 조건에 따라 다른 컴포넌트를 렌더링해야 할 때 사용한다. JavaScript의 조건문(if, ternary operator 등)을 이용하거나, 짧은 회로 평가(short-circuit evaluation)를 이용해 조건부 렌더링을 수행할 수 있다. 아래 예제 코드를 통해 React에서 조건부 렌더링을 하는 다양한 방법에 대해 알아보도록 하자.

📌 삼항 연산자를 이용한 조건부 렌더링

JavaScript의 삼항 연산자(조건 연산자)를 사용하여 조건부 렌더링을 수행할 수 있다.

import React from 'react';

function WelcomeMessage({ user }) {
  return (
    <div>
      {user ? <h1>Welcome back, {user.name}!</h1> : <h1>Welcome, guest!</h1>}
    </div>
  );
}

export default WelcomeMessage;

위 코드에서는 삼항 연산자(? :)를 사용하여 user가 있으면 "Welcome back" 메시지를, 없으면 "Welcome, guest" 메시지를 렌더링 한다.

📌 && 연산자를 이용한 조건부 렌더링

JavaScript의 논리 연산자를 사용하여 조건부 렌더링을 수행할 수 있다. 특히 &&(AND 연산자)는 짧은 회로 평가(short-circuit evaluation)를 통해 첫 번째 피연산자가 false인 경우 두 번째 피연산자를 무시하기 때문에, 이를 이용해 조건부 렌더링을 할 수 있다.

import React from 'react';

function WelcomeMessage({ user }) {
  return <div>{user && <h1>Welcome back, {user.name}!</h1>}</div>;
}

export default WelcomeMessage;

위 코드에서는 && 연산자를 사용하여 user가 있을 때만 메시지를 렌더링하며, user가 없으면 아무 것도 렌더링하지 않는다.

📌 조건 함수를 이용한 조건부 렌더링

조건 함수를 이용한 방법은 조건에 따라 서로 다른 컴포넌트를 반환하는 함수를 만드는 것이다. 예를 들어, 아래 코드는 사용자가 로그인한 경우와 그렇지 않은 경우에 다른 메시지를 보여주는 컴포넌트를 만든다.

import React from 'react';

function WelcomeMessage({ user }) {
  function renderMessage() {
    if (user) {
      return <h1>Welcome back, {user.name}!</h1>;
    } else {
      return <h1>Welcome, guest!</h1>;
    }
  }

  return <div>{renderMessage()}</div>;
}

export default WelcomeMessage;

위 코드에서는 renderMessage라는 함수를 만들어 조건에 따라 서로 다른 요소를 반환한다. 이런 식으로 조건에 따라 렌더링을 달리 할 수도 있으며, 이 방법은 주로 복잡한 로직이 필요한 경우에 사용한다.

📌 컴포넌트 외부에서 조건문을 사용하는 방법

React 컴포넌트 외부에서 변수와 조건문을 사용하여 값을 계산하고, 그 결과를 컴포넌트의 prop으로 전달하여 사용할 수 있다.

import React from 'react';

const user = {
  name: 'John',
  isLoggedin: true,
};

const message = user.isLoggedin ? `Welcome back, ${user.name}!` : 'Welcome, guest!';

function WelcomeMessage() {
  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
}

export default WelcomeMessage;

이 예제 코드에서는 컴포넌트 외부에서 user 객체와 message 문자열을 정의한다. message는user.isLoggedin의 값에 따라 변화하며, 이 결과는 WelcomeMessage 컴포넌트 내에서 렌더링된다.

이 방식은 간단한 로직에 대해 컴포넌트 내부를 깔끔하게 유지하면서 사용할 수 있다. 하지만, 복잡한 로직이 필요하거나 컴포넌트의 상태에 따라 동적으로 변화해야 하는 값에 대해서는 이 방식이 적합하지 않을 수 있으므로, 이런 경우에는 컴포넌트 내부에서 상태 관리를 해주는 것이 좋다.