[React] 리액트에서 반복문을 사용해 배열의 내용들 출력하기

객체 안에 담긴 내용을 html에 보이게 해야 하는데 객체 멤버 변수 중 배열로 되어 있는 것이 있어 배열의 내용을 깔끔하게 출력하는 방법을 공유하려고 한다.

반복문을 사용해 배열 내용을 출력하는 방법은 두 가지가 있는데 본인 코딩 스타일에 맞는 방식을 선택해 코딩하면 되겠다.

 

1. 메소드의 return 값을 출력

const use_for = (arr) => {
    const result = [];

    for (let i = 0; i < arr.length; i++) {
      result.push(<p key={i}>{arr[i]}</p>);
    }

    return result;
};

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

메소드의 return 값들을 출력시켜주는 방법이며 arr는 부모에게서 받아 오거나 import한 파일의 정보를 담고 있는 배열이다.

 

2. map() 사용

return (
	<div>
		{arr.map((value, index) => (
			<p key={index}>
				{value}
			</p>
		))}
	</div>
)

map()을 사용해 return 문 내에서 코드를 작성한다.

 

재사용성 면에서는 1번 방법이 좋지만, return문 내에 코딩을 직접하는 2는 한 번에 로직을 이해 할 수 있다.

근데 2번 사용하는 경우 코드가 너무 지저분해지는 것 같아서 1번 방식이 좋다고 생각한다.