제로초 리액트 강의 3.1 map

리액트 반복문 map

                <ul>
                    {['사과','바나나','귤'].map( (v)=> {
                        return (
                        <li>{v}</li>
                        );
                    })}
                </ul>

이렇게 반복문을 돌리면 배열의 값들이 들어간채로 목록이 생성됨

 

그렇다면 값이 두개인 것은?

이렇게 2차원 배열로도 가능하고

                <ul>
                    {[['사과', '맛없다'],['바나나', '맛없다'],['귤', '맛있다']].map( (v)=> {
                        return (
                        <li><b>{v[0]}</b> - {v[1]}</li>
                        );
                    })}
                </ul>

객체로도 가능

                <ul>
                    {[{fruit:'사과', taste:'맛없다'},{fruit:'바나나', taste:'맛없다'},{fruit:'귤', taste:'맛있다'}].map( (v)=> {
                        return (
                        <li><b>{v.fruit}</b> - {v.taste}</li>
                        );
                    })}
                </ul>

이름이 있으니 객체가 더 나을듯...

 

화살표 함수 return 생략 가능

중괄호 + return 생략, 소괄호도 생략 가능

               <ul>
                    {[{fruit:'사과', taste:'맛없다'},{fruit:'바나나', taste:'맛없다'},{fruit:'귤', taste:'맛있다'}].map( (v)=> ( 
                        <li key={v.fruit}><b>{v.fruit}</b> - {v.taste}</li>
                    ))} // 중괄호나 소괄호 없이 리턴 생략 가능
                </ul>

 

이렇게만 쓰고 key가 없으면 에러가 남!

보이지는 않지만 리액트가 필요로 하는 기능, key값은 고유해야함! 고유하지 않으면 에러남

key에 순서를 받아오는 i 값을 사용하는 것은 좋지 못함, 성능 최적화 할 때 좋지 않음, 문자 + i 를 할 수 도 있지만

걍 쓰지말자~

                <ul>
                    {[{fruit:'사과', taste:'맛없다'},{fruit:'바나나', taste:'맛없다'},{fruit:'귤', taste:'맛있다'}].map( (v, i)=> { // 순서를 받아오는 것도 가능
                        return (
                        <li key={v.fruit+v.taste}><b>{v.fruit}</b> - {v.taste}</li>  // 하지만 key에 i를 사용하면 나중에 성능 최적화 때 문제가 생길 수 있음
                        );
                    })}
                </ul>

 

 

 

이렇게 map을 쓰면 불편하기 때문에 사용하는 것이 props!!!