[React] 조건부 렌더링과 리스트 렌더링

목차

React에서의 조건부 렌더링과 리스트 렌더링: 효율적인 UI 구성하기 🌟📃

안녕하세요, React를 사용하여 더욱 동적이고 반응적인 웹 애플리케이션을 구축하려는 개발자 여러분! 웹 애플리케이션에서 다양한 데이터를 효과적으로 표시하고 사용자 상호작용에 유연하게 반응하기 위해서는 조건부 렌더링과 리스트 렌더링 기법을 잘 활용해야 합니다. 이번 포스트에서는 React에서 조건부 렌더링과 리스트 렌더링을 사용하여 효율적으로 UI를 구성하는 방법에 대해 알아보겠습니다.

---

조건부 렌더링이란?

조건부 렌더링은 특정 조건에 따라 다른 컴포넌트를 렌더링하거나 표시하지 않는 방법입니다. React에서는 JavaScript의 조건문을 사용하여 이를 쉽게 구현할 수 있습니다.

조건부 렌더링 예제

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  const isLoggedIn = true;
  return (
    <div>
      {isLoggedIn ? <Welcome name="Sarah" /> : <Welcome name="Guest" />}
    </div>
  );
}

위 예제는 isLoggedIn의 값에 따라 다른 인사말을 보여 줍니다.

 

리스트 렌더링이란?

리스트 렌더링은 배열의 각 요소를 순회하면서 React 요소로 변환하는 과정을 말합니다. map() 함수를 사용하여 배열을 React 요소의 배열로 변환할 수 있습니다.

리스트 렌더링 예제

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

key는 리스트의 각 요소를 식별하기 위해 사용됩니다. key는 고유해야 하며, 리스트 내에서 안정적인 값을 사용하는 것이 좋습니다.

 

마무리하며...

React에서 조건부 렌더링과 리스트 렌더링을 통해 다양한 데이터를 효율적으로 관리하고 사용자에게 동적인 UI를 제공할 수 있습니다. 이 기법들을 활용하여 사용자의 상호작용에 따라 반응하는 유연하고 풍부한 인터페이스를 구축해 보세요.

React 개발 과정에서 이러한 방법들이 여러분의 애플리케이션을 더욱 빛나게 만들어 줄 것입니다! 💡🌈

---

Reference:

Conditional Rendering – React

Lists and Keys – React