[react] JSX 배열 반복문 렌더링 - for, map, forEach

ReactJS

---

리액트에서 JSX 반복 렌더링

JSX와 중괄호

반복문을 사용하기 위해서는 JSX안에서 중괄호({}, curly braces)를 써야 합니다. JSX는 리액트 컴포넌트의 return문으로 반환되는 코드입니다. javascript를 확장한 문법으로, React에서 UI를 구현하는 데 사용됩니다. (HTML과는 다릅니다)

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

 

이 위치에서 반복 렌더링을 하기 위해 사용이 가능한 방법과 그렇지 않은 방법을 살펴보겠습니다.

 

 

1. for 문❌

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>
    )
}

 

2. forEach 메서드❌

return문 안에서는 JSX를 '반환' 해주어야 합니다. forEach는 배열의 요소를 순회만 할 뿐 반환해 주는 메서드가 아니기 때문에 사용할 수 없습니다.

 

3. map 메서드 ⭕

map 메서드는 요소를 순회하며 값을 반환해 주기 때문에 사용이 가능합니다. map 순회 함수는 반드시 JSX를 반환해야 합니다. 반복문을 사용할 때에는 key값을 필수로 지정해주어야 합니다.

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

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

 

4. 함수 호출⭕

JSX 배열을 반환하는 함수를 미리 선언한 후 return 문에서 호출하는 것이 가능합니다. 이렇게 하면 코드가 깔끔해지고 함수의 재사용이 가능합니다.

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>;
}

---

ReactJS - Curly braces

JavaScript in JSX with Curly Braces – React

ReactJS - Rendering Lists

Rendering Lists – React