jsx에서는 for문을 중괄호 안에 작성할 수 없다.

리액트 반복문 💞

똑같은 html을 반복적으로 사용할 때 반복문을 사용하면 중복 코드를 줄일 수 있다.
리액트에서 반복문을 사용하는 방법을 알아보자.

1. 배열 메소드 map()

array 메소드인 map 함수를 사용하여 코드 반복을 실행할 수 있다.

map() 사용방법

const arr = ['배열 요소1', '배열 요소2', '배열 요소3'];
arr.map((elem, index) => { 
  console.log(elem);
  console.log(index);
});

map은 배열 내장 메소드이기 때문에 배열.map(콜백함수) 형태로 작성하여 사용한다.

map함수에 들어가는 콜백함수는 첫번째 파라미터로 배열의 요소가 순차적으로 들어가며 두번째 파라미터는 현재 요소의 인덱스이다.

코드를 실행해보면 콘솔에 위와 같이 나타난다.
즉, 코드 첫번째 파라미터의 elem은 각각의 배열 요소를, 두번째 파라미터은 index는 현재 배열 요소의 인덱스를 알 수 있다.

리액트에서 map 함수 사용시

리액트에서 map함수는 자바스크립트 문법이므로 중괄호{} 안에 작성하여 사용할 수 있다.

{
  const arr = [4, 44, 444];
  const newArr = arr.map((elem) => {
    return elem * 2;
  });
  console.log(newArr); // [ 8, 88, 888 ]
}

map 함수는 return 값을 넣어주면 새로운 배열을 반환한다.
위 코드는 모든 arr 배열 요소에 2를 곱한 값을 return해주고 있다.
즉, newArr 배열은 arr 배열의 각각 요소가 2씩 곱해진 상태로 새로운 배열을 만들게 되는 것이다.

리액트에서 map함수로 html 반복하기

function App() {
  const title = ['제목1번', '제목2번', '제목3번'];
  return (
    <div>
      {title.map((titleElem, index) => {
        return (
          <div key={index}>
            <h2>{titleElem}</h2>
          </div>
        );
      })}
    </div>
  );
}

굉장히 복잡해보이지만 필요한 부분만 잘라서 보면 다음과 같다.

const title = ['제목1번', '제목2번', '제목3번'];

map 함수를 이용해 반복문을 돌릴 title이라는 배열이다.

title.map((titleElem, index) => {
  return (
    <div key={index}><h2>{titleElem}</h2></div>
  );
})

title.map을 하면 title 배열의 길이(요소 개수)만큼 반복하여 실행된다.
리턴 값으로는 h2 태그 안에 현재 반복문 실행중인 배열의 요소를 바인딩하여 반환한다.
즉, 제목1번, 제목2번, 제목3번이라는 h2 태그가 생성될 것이다.
여기서 div 태그 안의 속성에 key 값으로 index를 주었는데 주지 않아도 렌더링은 되지만 콘솔창에서 에러메시지로 유니크 키를 주라는 메시지가 나타난다.

참고사항

위 코드에서는 key 값으로 index를 주었는데 이는 좋지 않은 코드이다.
삭제되거나 순서가 변경되지 않은 상황에서는 상관없지만 순서가 변경되는 경우 성능 문제나 컴포넌트 문제가 발생할 수 있다.
그러므로 리액트에서는 유니크한 key를 필요로 하므로 유니크한 문자열을 key값으로 설정하는 것이 좋다.

map함수를 사용하여 각각의 h2 html 태그를 반복문으로 작성하였다.

for문 사용하기

아쉽게도 JSX의 중괄호 안에서 for문은 사용할 수 없다.

function App() {
  const arr = [1, 2, 3, 4, 5];
  
  const arrLoop = () => {
    const newArr = [];
    for (let i = 0; i < arr.length; i++) {
      newArr.push(<h2 key={i}>{ arr[i] }</h2>);
    }
    return newArr;
  };

  return <div> { arrLoop() } </div>;
}

JSX 중괄호 안에서 사용할 수는 없지만, 자바스크립트 함수나 변수에 익명함수를 담아서 사용하는 방법으로 for문을 사용할 수는 있다.
map함수를 쓸 때와 마찬가지로 유니크한 key값을 넣어주지 않으면 콘솔 에서 에러 메시지가 나타난다. (안 넣어도 렌더링은 잘 되지만 넣어주는게 좋다.)