React에서 List 구성 요소를 통한 반복

이 글은 Fiverr의 후원으로 작성되었습니다 - 추가 수입을 얻거나 전업 프리랜서가 되기 위한 프리랜서.

이전 기사에서는 콘텐츠를 동적으로 출력하는 방법을 살펴보았습니다. 그래도 해결해야 할 문제가 하나 있습니다. 즉, 상태 개체(persons = [ ... ])에서 각 구성 요소에 대한 사람의 배열(const state = { ... })을 제로 인덱싱을 통해 속성(<Person ... />)으로 수동으로 추출합니다.

상태 개체의 개인 배열:

App.js

const [state, setState] = useState({
    persons: [
      { name: 'Bello', language: 'React', id: '2sdr3' },
      { name: 'Michael', language: 'Vue', id: 'de6c3' },
      { name: 'Mary', language: 'Angular', id: 'c1z3x' }
    ],
    showPersons: true
 });
                         ...    ...    ...
                         ...    ...    ...
                         ...    ...    ...
<div>
    <Person
        name={state.persons[0].name}
        language={state.persons[0].language}
        id={state.persons[0].id} />
    <Person
        name={state.persons[1].name}
        language={state.persons[1].language}
        id={state.persons[1].id} />
    <Person
        name={state.persons[2].name}
        language={state.persons[2].language}
        id={state.persons[2].id} />
</div>
                         ...    ...    ...
                         ...    ...    ...
                         ...    ...    ...

Zero 인덱싱은 특히 복잡한 앱의 경우 구성 요소를 유지 관리하기 어렵게 만듭니다.

해결책은 배열의 ES6+ 매핑과 같은 보다 우아한 접근 방식을 사용하는 것입니다.

예를 들어:

JS

const array = [ 1, 4, 5, 2, 7 ];

const arrayFunc = element => {
    return element * 2;
};

array.map(arrayFunc);

// output: [ 2, 8, 10, 4, 14 ]

Array mapping executes each member or element in an array to perform equal operations.

효과적인 방법은 매핑(for-loop 또는 기타 접근 방식)을 통해 배열의 각 구성 요소를 반복하는 것입니다.

                         ...    ...    ...
                         ...    ...    ...
                         ...    ...    ...
<div>
    {
      state.persons.map(person => {
        return <Person
          name={person.name}
          language={person.language}
          id={person.id} />
      })
    }
</div>
                         ...    ...    ...
                         ...    ...    ...
                         ...    ...    ...

전체 코드:

import React from 'react';
import { useState } from 'react';
import Person from './Person/Person';
import bodyStyles from './body.module.css';

const App = () => {
  const [state, setState] = useState({
    persons: [
      { name: 'Bello', language: 'React', id: '2sdr3' },
      { name: 'Michael', language: 'Vue', id: 'de6c3' },
      { name: 'Mary', language: 'Angular', id: 'c1z3x' }
    ],
    showPersons: true
  });

  const personsToggleHandler = () => {
    const showCards = state.showPersons;
    setState((prevState) => ({
      ...prevState,
      showPersons: !showCards
    }))
  }

  let personsList = state.showPersons ?
    (
      <div>
        {
          state.persons.map(person => {
            return <Person
              name={person.name}
              language={person.language}
              id={person.id} />
          })
        }
      </div>
    ) : null;

  return (
    <div className={bodyStyles.body}>
      <div className='Person-Container'>
        {personsList}
        <h3
          style={{
            textAlign: 'center',
            fontFamily: 'sans-serif'
          }}>Toggle Persons</h3>
      </div>

      <div className={bodyStyles.btns}>
        <button
          className={bodyStyles.button}
          onClick={personsToggleHandler}>Toggle Person Cards</button>
      </div>
    </div>
  );
};

export default App;

위의 문제를 해결하면 브라우저 콘솔에서 해결해야 할 새로운 버그가 생겼습니다.

키보드 단축키F12를 사용하여 브라우저 콘솔을 열면 "경고: 목록의 각 자식에는 고유한 **key* prop*이 있어야 합니다."라는 경고가 표시됩니다. 즉, 상태 객체의 배열에 있는 각 개인 구성원은 각 구성 요소 목록 속성에 연결하기 위해 key를 가져야 합니다.

The index of each element in a component list must have its key.

App.js

const [state, setState] = useState({
    persons: [
      { name: 'Bello', language: 'React', id: '2sdr3' },
      { name: 'Michael', language: 'Vue', id: 'de6c3' },
      { name: 'Mary', language: 'Angular', id: 'c1z3x' }
    ],
    showPersons: true
 });
                         ...    ...    ...
                         ...    ...    ...
                         ...    ...    ...
<div>
    {
      state.persons.map((person, personIndex) => {
        return <Person
          name={person.name}
          language={person.language}
          id={person.id}
          key={personIndex} />
      })
    }
</div>
                         ...    ...    ...
                         ...    ...    ...
                         ...    ...    ...

이제 personIndex 개체의 persons 배열에 있는 각 요소를 구성 요소 목록 특성에 매핑하는 state 새 속성이 있습니다. 콘솔에서 다시 오류를 찾을 수 없습니다.

The key is a reserved keyword in JavaScript which acts as an agent to maps each element in the array to component list attributes.

personIndex 속성을 생략하고 각 구성 요소의 속성을 매핑하기 위해 각 사람의 배열 개체에 대해 고유한id 속성을 사용할 수 있습니다.

const [state, setState] = useState({
    persons: [
      { name: 'Bello', language: 'React', id: '2sdr3' },
      { name: 'Michael', language: 'Vue', id: 'de6c3' },
      { name: 'Mary', language: 'Angular', id: 'c1z3x' }
    ],
    showPersons: true
 });
                         ...    ...    ...
                         ...    ...    ...
                         ...    ...    ...
<div>
  {
    state.persons.map(person => {
      return <Person
        name={person.name}
        language={person.language}
        id={person.id}
        key={person.id} />
    })
  }
</div>
                         ...    ...    ...
                         ...    ...    ...
                         ...    ...    ...

키를 사용하는 이유

key 속성은 Virtual DOM을 사용하여 변경되는 특정 상태를 알기 때문에 구성 요소 목록을 효과적으로 업데이트합니다. 이렇게 하면 구성 요소가 약간 변경될 때마다 전체 목록이 다시 렌더링되는 것을 방지할 수 있습니다. 그래서 상태를 효과적으로 관리하기 위해 키 속성을 사용하라는 경고가 표시되었습니다.

JSX에서 구성 요소 목록을 포함하는 배열 함수에 배열(사람의 배열)을 매핑하는 것은 다음과 같습니다.

JSX

                         ...    ...    ...
                         ...    ...    ...
                         ...    ...    ...
let arrayFunc;
                         ...    ...    ...
<div>
  {
    arrayFunc = (person, personIndex) => {
      return <Person
        name={person.name}
        language={person.language}
        id={person.id}
        key={personIndex} />
    }
  }
  {state.persons.map(arrayFunc)};
</div>
                         ...    ...    ...
                         ...    ...    ...
                         ...    ...    ...

하지만 arrayFunc 함수는 <div> 외부에서 선언해야 합니다.

전체 코드:

import React from 'react';
import { useState } from 'react';
import Person from './Person/Person';
import bodyStyles from './body.module.css';

const App = () => {
  const [state, setState] = useState({
    persons: [
      { name: 'Bello', language: 'React', id: '2sdr3' },
      { name: 'Michael', language: 'Vue', id: 'de6c3' },
      { name: 'Mary', language: 'Angular', id: 'c1z3x' }
    ],
    showPersons: true
  });

  const personsToggleHandler = () => {
    const showCards = state.showPersons;
    setState((prevState) => ({
      ...prevState,
      showPersons: !showCards
    }))
  }

  let arrayFunc;
  let personsList = state.showPersons ?
    (
      <div>
        {
          arrayFunc = (person, personIndex) => {
            return <Person
              name={person.name}
              language={person.language}
              id={person.id}
              key={personIndex} />
          }
        }
        {state.persons.map(arrayFunc)};
      </div>
    ) : null;

  return (
    <div className={bodyStyles.body}>
      <div className='Person-Container'>
        {personsList}
        <h3
          style={{
            textAlign: 'center',
            fontFamily: 'sans-serif'
          }}>Toggle Persons</h3>
      </div>

      <div className={bodyStyles.btns}>
        <button
          className={bodyStyles.button}
          onClick={personsToggleHandler}>Toggle Person Cards</button>
      </div>
    </div>
  );
};

export default App;

또는 함수 선언 없이 arrayFunc — 익명 함수:

                         ...    ...    ...
                         ...    ...    ...
                         ...    ...    ...
<div>
  {
    state.persons.map((person, personIndex) => {
      return <Person
        name={person.name}
        language={person.language}
        id={person.id}
        key={personIndex} />
    };)
  }
</div>
                         ...    ...    ...
                         ...    ...    ...
                         ...    ...    ...

.ltag__user__id__428113 .follow-action-button {
배경색: #000000 !중요;
색상: #ffffff !중요;
테두리 색상: #000000 !중요;
}

벨로

Hi, I am Bello Osagie, a tech blogger, writer, and web developer. I teach web development for free… Join me to learn, discover, and have fun coding together!

테크스택 | 파이버

Fiverr가 후원하는 Techstack 기사.

검증된 비즈니스 경험이 있는 프리랜서와 연결하십시오.

고객 서비스 매니저가 완벽한 인재를 매칭해 드립니다.

추가 수입을 얻거나 풀타임 프리랜서가 되기 위한 프리랜서.

Sign up 귀하의 비즈니스를 위한 완벽한 프리랜서 서비스를 찾거나 프리랜서가 되십시오.



Support 내가 하는 일과 계속해서 무료 콘텐츠를 만들도록 밀어붙이는 것.