6. 리액트 Map / Props

리액트 반복문은 기본적으로 map을 사용

 

기본 map 의 원리는 배열안의 값들 하나씩을 v인자로 받아서 보여주는 형식

 <ul>
   { ['apple','banana','cherry'] .map( ( v )=>{
     return( <li>{v}</li> )
   })}
 </ul>

 

2차원 배열로 표현 

                <ul>
                    { [ ['apple','red'],['banana','yello'],['cherry','black'] ] .map( ( v )=>{
                    return(
                        <li>
                            <span>{v[0]}</span>
                            <p>{v[1]} </p>
                        </li>
                    )
                    })}
                </ul>

 

 

v인자가 ['fruit','color']니까 v[0], v[1] 이런식

 

 

객체로도 표현이가능

                <ul>
                    {[ 
                        { fruit:'apple', color:'red'},
                        { fruit:'banana', color:'yello'},
                        { fruit:'cherry', color:'black'} ] .map( ( v )=>{
                    return(
                        <li>
                            <span>{v.fruit }</span>
                            <p>{v.color } </p>
                        </li>
                    )
                    })}
                </ul>

가독성이 떨어지는 문제와 성능문제로 props를 사용한다

 

key 값이라고 태그의 고유한 키값을 꼭 필수로 설정해 주어야 한다

그래야 react가 어떤 dom을 바꿨는지, 바꿔야 될지 알 수 있음.

(123번중 2번을 삭제했으면 4번째 자리에 새로생긴 태그가들어가야 하나 2번째자리에 들어가는 문제가 생길수 있음)

 

그리고 화살표 함수는 return이 생략가능

{}중괄호가 없이 ()소괄호 만 있거나 {}중괄호 ()소괄호 둘다 없으면 전체를 리턴한다는 뜻

 

 

    fruits =  [{ fruit:'apple', color:'red'},
    { fruit:'banana', color:'yello'},
    { fruit:'cherry', color:'black'}];

    render(){
        return(
            <> 
                <ul>
                    { this.fruits.map( ( v )=>{
                    (
                        <li>
                            <span>{v.fruit }</span>
                            <p>{v.color } </p>
                        </li>
                    )
                    })}
                </ul>
            </>
        )
    }

fruits 배열을 class component의 필드로 내보냈고

 

 

 

 

 

 

 

Trylist부분을 컴포넌트로 만들기

// TryList.jsx
import React ,{Component} from 'react';
 
class TryList extends Component {
    render(){
        return(
            <li>
                <span>{v.fruit }</span>
                <p>{v.color } </p> 
            </li>
        )
    }
}

export default TryList;

이렇게 <li>부분만 보여주는 컴포넌트를 만들었고

 

     render(){
        return(
            <> 
                <ul>
                    { this.fruits.map( ( v,i )=>
                      (
                         {/* <TryList />  jsx주석*/}
                         <TryList v={v} i={i} />
                      )
                    )}
                </ul>
            </>
        )
    }

파일이 나눠짐으로써 TryList.jsx는 v가뭔지 모르게 된다.  그래서

부모컴포넌트에서 value={v} index={i} 이렇게 tryList 컴포넌트에게 props로 값을보내준다

 

 

보낼때

 <TryList val={v} index={i} />

 

 

받을때

  <span>{ this.props.val.fruit } </span>
  <p>{ this.props.index.color } </p>

html(attribute) react(props)