react(리액트) JSX 배열 반복문 렌더링 - for/map/forEach

자바스크립트 반복문을 통해 DOM에 JSX을 렌더링하고 싶을 때

function App() {
  const weekArr = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"];
  return <div>...</div>;
}

 

아래처럼 컴포넌트 return문 안에서 for문은 못씁니다.

// wrong
function App() {
  const weekArr = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"];
  return
    (
      <div>
        {
          for ( let i = 0; i < weekArr.length; i++) 
            {
              <span>{weekArr(i)}</span>
            }
        }
      </div>
    )
}

 

 

방법은 두가지

 

1. return문에서 JSX를 반환하는 함수 호출

(JSX 루프 렌더링 시에 반드시 key값을 unique하게 할당해줍니다 - react specific) 

 - 장점: 재사용이 용이함, return문이 깔끔.

// right
function App() {
  const weekArr = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"];
  
  const rendering = () => {
    const result = [];
    for (let i = 0; i < weekArr.length; i++) {
      result.push(<span key={i}>{weekArr[i] + " / "}</span>);
    }
    return result;
  };

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

 

결과

2. return 안에서 map사용

(forEach는 값을 반환하지 않는 단순연산이기 때문에 JSX를 반환할 수 있는 map을 사용합니다)

 - 장점: 가독성 좋음, 직관적

// right
function App() {
  const weekArr = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"];

  return (
    <div>
      {weekArr.map((week, index) => (
        <span key={index}>
          {week}
          {" / "}
        </span>
      ))}
    </div>
  );
}

 

결과 - 위와 동일.

 

출처: https://codingbroker.tistory.com/123