React의 for 루프

1. React에서 .map() 메소드를 사용하여 for 맵 구현
2. JavaScript for 루프
3. 즉시 호출되는 함수

복잡한 백엔드 데이터를 처리하는 것은 프론트엔드 개발자의 작업의 일부입니다. 종종 데이터에는 UI의 구성 요소 또는 기타 빌딩 블록을 나타내는 개체 목록이 포함됩니다.

예를 들어, 온라인 상점을 만들 때 데이터에는 웹사이트에 표시해야 하는 제품 목록이 포함될 가능성이 높습니다. 수동으로 목록을 살펴보고 구성 요소를 하나씩 만드는 것은 여러 가지 이유로 비효율적입니다. 예를 들어, 제품이 제거되거나 목록에 추가되면 어떻게 하시겠습니까? 매번 돌아가서 JSX 파일을 업데이트할 수는 없습니다.

목록을 살펴보고 구성 요소 또는 HTML 요소를 자동으로 렌더링하는 방법에는 여러 가지가 있습니다.

React에서 .map() 메소드를 사용하여 for 맵 구현

ES6에 도입된 .map() 메서드는 배열을 반복하고 배열의 각 항목에서 데이터를 포함하는 유효한 JSX 요소를 반환하는 기본 방법입니다. 개발자는 종종 이 방법을 사용하여 일반 HTML 요소뿐만 아니라 사용자 정의 구성 요소를 만듭니다.

루프를 수행하는 다른 방법이 있지만 대부분의 React 개발자는 읽기, 쓰기 및 유지 관리가 쉽기 때문에 .map() 메서드를 사용합니다. 다음은 객체 배열을 반복하고 사용자 데이터를 화면에 렌더링하는 방법입니다.

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    console.log('App started');
    return <div>
    {data.map(person => <p key={person.name}>{`${person.name}, ${person.age} years old`}</p>)}
    </div>
  }
}

출력:

John Doe, 44 years old

Jane Doe, 45 years old

이 예제에서 map() 메소드는 두 번 실행되고 매번 하나의 단락 요소를 반환한다는 것을 기억하십시오. 이것이 결과를 <div></div>로 감싸는 것이 필수적인 이유입니다. 모든 구성 요소는 원하는 만큼 자식 요소를 포함하는 하나의 부모 컨테이너를 반환해야 합니다.

key 속성

.map() 메서드를 사용하여 생성된 모든 요소에는 고유한 값으로 설정된 key 식별자가 있어야 합니다.

<p key={person.name}>{}</p>)

React는 key 속성에 대한 고유한 값을 생성하기 위해 index 값을 사용하는 것을 권장하지 않습니다.

props 전달

.map() 메서드를 사용하여 여러 구성 요소를 렌더링하려는 경우 소품을 전달할 수도 있습니다.

여러 Product 구성 요소를 렌더링하려고 한다고 가정해 보겠습니다. props를 전달하는 방법은 다음과 같습니다.

return <div>
    {data.map(product => <Product price={product.price} name={product.name}></Product>)}
    </div>

JavaScript for 루프

배열을 반복하는 또 다른 방법은 for 루프를 사용하는 것입니다. 이 접근 방식을 선택하면 return 블록 위에서 루프를 수행해야 합니다.

코드는 다음과 같습니다.

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    let persons = [];
    for (let i = 0; i<data.length; i++){
      persons.push(<p>{data[i].name + ", " + data[i].age + " years old"}</p>)
    }
    return <div>
    {persons}
    </div>
  }
}

.map()에 비해 이 접근 방식은 더 장황하고 이해하기 어렵습니다. 그러나 결과는 동일할 것입니다.

즉시 호출되는 함수

기술적으로 return 문에서 for 루프를 사용하는 것이 가능하지만 함수를 만들고 for 루프를 본문으로 사용해야 합니다. 함수 작성이 끝나면 바로 뒤에 대괄호 ()를 붙여서 즉시 호출해야 합니다. 작동 방식은 다음과 같습니다.

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    return 
    <div>
    {function() {
      let persons = []
    for (let i = 0; i<data.length; i++){
      persons.push(<p>{data[i].name + ", " + data[i].age + " years old"}</p>)
    }
    return persons
    }()
    }</div>
  }
}