리액트(React)는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리로, 컴포넌트 기반 아키텍처를 통해 개발자들이 효율적으로 복잡한 UI를 설계할 수 있도록 돕습니다. 이 강좌에서는 리액트에서 자주 사용되는 반복문에 대해 깊이 있게 알아보겠습니다. 특히, JSX 내에서 반복문을 사용하는 방법, 주요 반복문 유형, 그리고 이를 활용한 예시 프로젝트를 통해 실습해 보도록 하겠습니다.
1. 반복문이란?
반복문은 특정 작업을 여러 번 수행할 수 있는 프로그래밍 구조로, 여러 가지 데이터에 대해 동일한 행동을 반복하는 데 사용됩니다. 자바스크립트에서 제공되는 반복문으로는 for, while, forEach 등이 있습니다. 리액트에서는 주로 배열 데이터를 반복적으로 렌더링할 때 유용하게 사용됩니다.
2. JSX와 반복문
JSX(장치 확장 문법)는 JavaScript를 확장한 문법으로, HTML 태그를 JavaScript 코드 내에 직접 작성할 수 있게 해줍니다. 그러나 JSX에서는 일반적인 JavaScript 반복문을 사용할 수 없으므로, 자바스크립트의 map() 메소드를 주로 사용합니다. map() 메소드는 배열의 각 요소에 대해 함수를 실행하고, 그 결과로 새로운 배열을 반환합니다.
2.1. map() 메소드를 이용한 반복문 사용
리액트에서 자주 사용하는 map() 메소드를 사용한 반복문 예제를 살펴보겠습니다.
const items = ['사과', '바나나', '체리'];
const ItemList = () => {
return (
<ul>
{items.map(item => <li key={item}>{item}</li>)}
</ul>
);
};위 코드에서는 items 배열의 각 요소를 순회하여 리스트 태그로 변환하고 있습니다. 이때 각 리스트 항목에 key 속성을 추가하여 성능을 최적화합니다. 리액트는 배열을 비교하여 변경 사항을 효율적으로 처리할 수 있도록 도와줍니다.
3. 반복문 종류
리액트 컴포넌트에서 사용할 수 있는 다양한 반복문 유형을 알아보겠습니다.
3.1. for문
전통적인 for 문을 JSX에 직접 사용할 수는 없지만, 일반적인 비즈니스 로직에서 충분히 활용될 수 있습니다. 예를 들어, 다음과 같이 for 문을 사용하여 배열을 생성한 후 출력할 수 있습니다.
const ItemList = () => {
const items = [];
for(let i = 1; i <= 5; i++) {
items.push(`아이템 ${i}`);
}
return (
<ul>
{items.map(item => <li key={item}>{item}</li>)}
</ul>
);
};3.2. while문
while 문 역시 JSX 내에서는 직접 사용할 수 없지만, 상태 관리에 유용합니다. 예를 들어, 다음과 같이 사용할 수 있습니다.
const ItemList = () => {
const items = [];
let i = 1;
while(i <= 5) {
items.push(`아이템 ${i}`);
i++;
}
return (
<ul>
{items.map(item => <li key={item}>{item}</li>)}
</ul>
);
};4. 조건부 렌더링과 반복문
리액트에서는 조건부 렌더링과 반복문을 함께 사용할 수 있습니다. 예를 들어, 배열 요소가 특정 조건을 만족할 때만 렌더링하는 방법을 살펴보겠습니다.
const numbers = [1, 2, 3, 4, 5];
const ItemList = () => {
return (
<ul>
{numbers.map(number => number % 2 === 0 ? <li key={number}>{number}</li> : null)}
</ul>
);
};5. 반복문을 활용한 실습
이번 섹션에서는 실제로 반복문을 활용하여 간단한 Todo List 애플리케이션을 만들어 보도록 하겠습니다. 이 애플리케이션에서는 사용자로부터 입력받은 할 일 목록을 상태로 관리하고, 추가된 항목들을 반복문을 통해 렌더링합니다.
import React, { useState } from 'react';
const TodoApp = () => {
const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');
const addTodo = () => {
if (inputValue.trim() !== '') {
setTodos([...todos, inputValue]);
setInputValue('');
}
};
return (
<div>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button onClick={addTodo}>추가</button>
<ul>
{todos.map((todo, index) => <li key={index}>{todo}</li>)}
</ul>
</div>
);
};위 예제에서 useState 훅을 사용하여 사용자 입력을 관리하고, map() 메소드를 사용하여 추가된 할 일 목록을 화면에 렌더링합니다. 사용자가 입력한 값을 상태로 관리함으로써, 실시간으로 UI가 업데이트되는 것을 확인할 수 있습니다.
6. 마무리
이번 강좌에서는 리액트에서 반복문을 사용하는 다양한 방법에 대해 알아보았습니다. 반복문을 통해 대량의 데이터를 효율적으로 렌더링할 수 있으며, 이를 통해 사용자 경험을 개선하는 데 큰 기여를 할 수 있습니다. 또한, 반복문과 조건부 렌더링을 조합하여 복잡한 UI를 효과적으로 구축할 수 있는 방법론을 익혔습니다. 다음 강좌에서는 리액트의 상태 관리에 대해 좀 더 깊이 있게 다루어 보도록 하겠습니다.
이 강좌가 리액트를 배우는 데 유익한 정보가 되었기를 바랍니다. 지속적으로 다양한 실습과 함께 리액트를 마스터해 나가시길 바랍니다!