[React] 배열 - 새로운 배열 생성과 map()

React에서 배열 형태의 데이터를 관리할 때는 기존 배열을 직접 수정하기보다 새로운 배열을 만들어 State를 변경하는 방식을 사용한다.

또한 map()을 이용하면 배열의 데이터를 반복해서 JSX로 표현할 수 있다.

1. 새로운 배열을 만들어 State 변경하기

Todo 목록을 배열로 관리한다고 가정한다.

const [todos, setTodos] = useState([]);

새로운 Todo를 추가할 때 기존 배열에 직접 값을 추가하지 않고 새로운 배열을 만들어 전달한다.

setTodos([...todos, value]);

전개 연산자 ...를 사용하면 기존 배열의 요소를 새로운 배열에 복사할 수 있다.

예를 들어 기존 배열이 다음과 같다면,

todos
["공부하기", "운동하기"]

다음 코드가 실행된다.

setTodos([...todos, "책 읽기"]);

새로운 배열이 만들어진다.

["공부하기", "운동하기", "책 읽기"]

즉, 기존 배열을 직접 변경하는 것이 아니라 기존 데이터를 복사한 새로운 배열을 만들어 State를 변경하는 방식이다.

2. map()으로 배열을 JSX로 변환하기

React에서는 배열의 데이터를 화면에 반복해서 출력할 때 map()을 사용할 수 있다.

const todos = ["공부하기", "운동하기", "책 읽기"];

다음과 같이 작성하면 각 Todo가 하나의 <div>로 변환된다.

{
    todos.map((todo) => (
        <div>{todo}</div>
    ))
}

결과적으로 다음과 같은 JSX가 만들어진다.

<div>공부하기</div>
<div>운동하기</div>
<div>책 읽기</div>

즉, map()은 배열의 각 요소를 원하는 형태의 JSX로 변환할 때 사용할 수 있다

3. index도 함께 사용할 수 있다

map()의 두 번째 매개변수에서는 현재 요소의 순서인 index를 받을 수 있다.

{
    todos.map((todo, index) => (
        <div key={index}>
            {index + 1}번 : {todo}
        </div>
    ))
}

결과는 다음과 같이 출력된다.

1번 : 공부하기
2번 : 운동하기
3번 : 책 읽기

4. 반복되는 JSX에는 key 사용하기

React에서 map()으로 여러 JSX 요소를 생성할 때는 key를 지정하는 것이 좋다.

{
    todos.map((todo, index) => (
        <div key={index}>
            {todo}
        </div>
    ))
}

key는 반복되는 요소를 React가 구분하기 위해 사용하는 값이다.

따라서 가능하면 각 항목을 구분할 수 있는 고유한 값을 사용하는 것이 좋다.