React 반복문

* 반복문 사용 방법 3가지

1) 2차원배열 생성, 2) 객체 생성, 3) 즉시실행 함수

 

1) 2차원 배열 생성

...
return (
        
        <ul>
            {[
          		['사과','Apple'],
                ['오렌지','Orange'],
                ['포도','Grape'],
                ['바나나','Banana'],
                ['체리','Cherry']
            ].map( (v) => {
                return (
                    <li> <b>{ v[0] }</b> - { v[1] } </li>
                );
            })}
    </>
);

 

2) 객체 생성

...
return (
    <>
        <ul>
            {this.state.tries.map( (v, i) => {
                // return () 은 생략 가능. key에는 i 넣으면 안된다.(성능최적화 문제)
                return (
                
                    // 컴포넌트 분리함!!
                    <Try key={`${i + 1} 차 시도 :`} tryInfo = { v } index = { i } />
                );
            })}
        </ul>
    </>
);

// try.jsx
import React, { memo } from 'react';


const Try = memo(( props ) => {
    // props 의 값은 자식이 변경하면 안된다. 부모가 바꾸어야함. *원칙임!
    // 실무에서는 바꿔야할경우가있는데, 이럴경우 props를 state에 넣어준 후 그 state를 변경한다.
    
    // 부모한테받은 props 를 state 로 넣기.
    const [ result, setResult ] = useState(tryInfo.result);

    return (
        <li key = { `${props.index} 차 시도` }> 
                   <div>{ props.tryInfo.try }</div>
                   <div>{ props.tryInfo.result }</div>
        </li>
    )
});

export default Try;

 

3. 즉시 실행 함수를 만들어서 그 속에서 반복문을 사용한다. 배열에 jsx를 담아서 리턴한다.

{
    (() => {
        for(let i=0; i < tries.length; i ++) {
            array.push(<Try key={`${i + 1} 차 시도 :`} tryInfo = { v } index = { i } />);
        }
        return array;
    })();
}