[javascript] 리액트에서 조건부 렌더링과 반복문 처리 방법
리액트에서 UI를 개발하다 보면 조건에 따라 다른 컴포넌트나 요소를 렌더링해야 하는 경우가 있습니다. 또한 반복문을 사용하여 동적인 UI를 생성해야 하는 경우도 있습니다. 이번 포스트에서는 리액트에서의 조건부 렌더링과 반복문 처리에 대해 알아보겠습니다.
조건부 렌더링
리액트에서 조건부 렌더링은 if 문이나 삼항 연산자, && 연산자를 사용하여 구현할 수 있습니다.
if 문 사용
import React from 'react';
function ConditionalRendering({ isLoggedIn }) {
if (isLoggedIn) {
return <p>Welcome, user!</p>;
} else {
return <p>Please log in</p>;
}
}
export default ConditionalRendering;
삼항 연산자 사용
import React from 'react';
function ConditionalRendering({ isLoggedIn }) {
return isLoggedIn ? <p>Welcome, user!</p> : <p>Please log in</p>;
}
export default ConditionalRendering;
&& 연산자 사용
import React from 'react';
function ConditionalRendering({ isLoggedIn }) {
return isLoggedIn && <p>Welcome, user!</p>;
}
export default ConditionalRendering;
반복문 처리
리액트에서는 배열의 각 요소를 컴포넌트로 변환하여 반복적으로 렌더링할 수 있습니다. 이를 위해 map 함수를 사용합니다.
import React from 'react';
function ListRendering({ items }) {
return (
<ul>
{items.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
export default ListRendering;
위 예제에서 items 배열의 각 요소를 li 요소로 변환하여 리스트를 렌더링합니다. 각 요소에는 key prop이 필요하며, 이는 각 요소의 고유한 값을 가져야 합니다.
리액트에서의 조건부 렌더링과 반복문 처리는 UI를 동적으로 제어할 수 있는 강력한 도구입니다. 이러한 기능들을 적절히 활용하여 보다 다양하고 유연한 UI를 구현할 수 있습니다.
기본적인 내용은 위와 같습니다. 다음 포스트에서는 조건부 렌더링과 반복문 처리를 활용한 실제 예제를 다뤄보겠습니다.
아직 궁금한 점이 있으신가요? 관련하여 추가로 도움을 드릴 수 있도록 알려주세요!