[React] 배열 각 요소 컴포넌트로 전환

배열을 컴포넌트로 전환하는 쉬운 방법을 간략히 정리해놓고자 한다.

우선 App 컴포넌트의 형태는 아래와 같다.

import './App.css'
import {Hello} from './Hello'

export default function App() {
  const names = ['Bill', 'Chichi', 'Mina'];
  return (
    <>
      <Hello name={names}></Hello>
    </>
  )
}

여기서 하고자 하는 것은 자식 컴포넌트에서 프롭으로 전달받은 배열의 각 요소를 컴포넌트(예를 들어 div태그에 innerHtml을 해당 배열의 값으로 가지는 컴포넌트)로 전환하는 것이다.

 

1. for each문

export function Hello({name}){

    const arr = [];
    for(let n of name){
        arr.push(
            <h1>
                {n}
            </h1>
        )
    }

    return(
       <>
        {arr}
       </>
    )
}

빈 배열을 선언하고 name을 구조분해 할당으로 받아서, 해당 배열의 각 요소에 태그를 씌운 후 arr에 push 하였다.

 

2. map 함수

export function Hello({name}){

    const arr = name.map(ele=><h1>{ele}</h1>)

    console.log(arr);
    return(
       <>
        {arr}
       </>
    )
}

Js의 map함수는 각요소의 값을 순환하며 return된 값을 새로운 값으로 가지는 배열을 반환한다.

 

쉽게 이야기해 아래의 설명처럼 작동한다.

1. 콜백함수의 파라미터로 현재 검사중인 배열의 값이 담긴다.
2. 콜백함수의 리턴값이 새로운 배열에 push된다.
3. 다음 요소를 검사한다.(1로 돌아간다.)

 

위의 코드에서는 arr의 각 요소가 ele에 들어간다. 그리고 리턴 값으로<h1>{ele}</h1>를 가진다.

즉 각 요소에 h1을 씌운 새로운 배열을 생성한 것이다.