[React ] JSX 배열 반복문 사용하고 싶을때

DOM에 JSX을 렌더링을 할려고 할때 

return문 안에서는 for문을 쓰지 못한다. 

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

 

방법은 두 가지가 있다.

 

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

(주의 key값을 반드시 unique하게 줘야함=)

 

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

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

그러면 

 

MON / TUE / WED / THU /  FRI /  SAT / SUN  /

이렇게 출력이 된다. 

 

 

2. return문 안에서 map사용 

 

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

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

 

둘다 결과는 같다.