[React] 반복문, map

map함수를 통해 다음 코드를 반복실행합니다.

x.map((v, i) => {
  return <y key = {b[i]} props={v} props2={i} />;
}

y태그의 key값을 b[i]로 지정 ( key값은 중복되면 안됨 )
props1의 값을 v로 지정   ( v는 x[i] )
props2의 값을 i로 지정    ( i는 현재 반복 인덱스 )

(예제)
map 함수 사용

render() {
    const { result, value, tries } = this.state;
    return (
      <>
        <h1>{result}</h1>
        <form onSubmit={this.onSubmitForm}>
          <input
            ref={this.onInputRef}
            maxLength={4}
            value={value}
            onChange={this.onChangeInput}
          />
        </form>
        <div>시도: {tries.length}</div>
        <ul>
          {tries.map((v, i) => {
            return <Try key={`${i + 1}차 시도 : `} tryInfo={v} />;
          })}
        </ul>
      </>
    );
  }

try.jsx

import React, { memo } from "react";

const Try = memo(({ tryInfo }) => {
  return (
    <li>
      <div>{tryInfo.try}</div>
      <div>{tryInfo.result}</div>
    </li>
  );
});

export default Try;

설명

map을 통해 반복되는 부분을 컴포넌트 분리해주었습니다. (Try.jsx)

{tries.map((v, i) => {
  return <Try key={`${i + 1}차 시도 : `} tryInfo={v} />;
})}

tries값을 map함수를 통해 v로 전달

i번째 Try의 key값을 i + text 로 설정 (i는 현재 map 반복 횟수를 의미)

tryInfo값을 v로 설정 (v는 tries[i])

자식 컴포넌트에게 props전달 (try.jsx에 tryInfo값 전달)

try.jsx는 props를 받아서 내용을 return

<Try> 태그를 return

 

 

해당 게시글은 www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=1&ab_channel=ZeroChoTV 의 강의내용을 기반으로 공부한 내용을 정리한 글입니다.