리액트 강좌: 배열 - 라이브스마트

안녕하세요! 이번 리액트 강좌에서는 배열에 대해 심도 깊게 살펴보겠습니다. 자바스크립트에서 배열은 데이터를 저장하고 조작하는 데 중요한 역할을 하며, 리액트에서도 배열은 UI를 구성하는 데 필수적인 요소입니다.

1. 자바스크립트 배열 기본 이해

배열은 순차적으로 값을 저장하는 데이터 구조입니다. 자바스크립트에서 배열은 객체의 일종으로, 다양한 데이터 타입(문자열, 숫자, 객체 등)을 저장할 수 있습니다.

const fruits = ["사과", "바나나", "체리"];

위의 코드는 문자열로 구성된 배열을 생성합니다.

1.1 배열의 주요 속성과 메서드

length: 배열의 길이를 반환합니다.
push(): 배열의 끝에 새로운 요소를 추가합니다.
pop(): 배열의 마지막 요소를 제거하고 그 요소를 반환합니다.
shift(): 배열의 첫 번째 요소를 제거하고 그 요소를 반환합니다.
unshift(): 배열의 앞에 새로운 요소를 추가합니다.
map(): 배열의 모든 요소에 대해 주어진 함수를 호출하고 새로운 배열을 반환합니다.
filter(): 조건에 맞는 요소만 추출하여 새로운 배열을 반환합니다.
reduce(): 배열의 각 요소에 대해 주어진 함수를 실행하고 단일 값을 반환합니다.

2. 리액트에서의 배열 사용

리액트에서 배열은 주로 컴포넌트의 상태를 관리하거나, 목록을 렌더링하는 데 사용됩니다. 배열을 기반으로 하는 UI 컴포넌트를 만드는 것은 매우 흔한 작업입니다.

2.1 배열을 이용한 컴포넌트 렌더링

리액트에서는 배열을 반목문으로 순회하여 UI를 동적으로 렌더링할 수 있습니다. 가장 일반적으로 map() 메서드를 사용하여 배열의 각 요소를 JSX로 변환합니다.

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

위의 코드는 fruits 배열을 받아 각 과일을 리스트 항목으로 렌더링하는 컴포넌트를 보여줍니다. 각 요소에 key 속성을 부여하여 리액트가 배열의 각 요소를 고유하게 식별할 수 있도록 합니다.

2.2 상태로 배열 관리하기

리액트에서 상태를 관리 할 때, 배열을 사용할 수 있습니다. useState 훅을 사용하여 배열을 상태로 정의할 수 있습니다.

import React, { useState } from 'react';

    function App() {
        const [fruits, setFruits] = useState(["사과", "바나나", "체리"]);

        const addFruit = (fruit) => {
            setFruits([...fruits, fruit]);
        };

        return (
            <div>
                <FruitList fruits={fruits} />
                <button onClick={() => addFruit("망고")}>추가</button>
            </div>
        );
    }

위의 예시에서는 초기 과일 배열을 state로 설정하고, 버튼 클릭 시 새로운 과일을 추가하는 로직을 구현하였습니다.

3. 배열의 불변성 유지하기

리액트에서 상태를 변경할 때는 데이터를 직접 수정하는 것이 아니라 새로운 데이터 구조를 만들어주어야 합니다. 이 과정에서 배열의 불변성을 유지하는 것이 중요합니다.

배열을 업데이트 할 때는 spread operator (…)를 활용하여 새로운 배열을 만들어 상태를 업데이트하는 것이 좋습니다.

const removeFruit = (fruit) => {
        setFruits(fruits.filter(item => item !== fruit));
    };

4. 배열의 다양한 활용: 사용자 경험 개선

리액트에서 배열을 활용하면 사용자 경험을 개선할 수 있는 많은 방법이 있습니다.

4.1 리스트 컴포넌트

리스트 컴포넌트를 만들 때는 each item에 대한 unique key를 제공하는 것이 중요합니다. 고유한 key를 사용함으로써 리액트는 리스트의 변경 사항을 효율적으로 관리하고 성능을 최적화합니다.

4.2 검색 기능 구현하기

배열의 데이터를 필터링하여 특정 조건을 만족하는 데이터만 보여주는 검색 기능을 구현할 수 있습니다. 이를 위해 filter() 메서드를 사용할 수 있습니다.

const filteredFruits = fruits.filter(fruit => fruit.includes(searchTerm));

4.3 배열 정렬하기

배열의 데이터를 정렬하기 위해 sort() 메서드를 사용할 수 있습니다. 예를 들어, 과일 이름을 알파벳 순으로 정렬하려면 다음과 같이 할 수 있습니다.

const sortedFruits = [...fruits].sort();

5. 결론

배열은 리액트에서 매우 중요한 데이터 구조입니다. 올바른 배열 처리 기술과 방법을 알고 있다면, 사용자에게 보다 나은 인터페이스를 제공할 수 있습니다. 이번 강좌에서 설명한 내용을 바탕으로 다양한 배열 활용 방법을 시도해 보세요. 지속적인 연습과 학습을 통해 리액트 개발자로서의 역량을 한층 더 키워나가길 바랍니다.

다음 시간에는 리액트 훅에 대한 자료를 준비할 예정이니 많은 기대 부탁드립니다.