[Hook]구조분해할당으로 child에 State값 내리기

구조분해할당을 적용하면 State값을 child에 내릴 때 좀 더 간단히 진행할 수 있다.

1. Parents가 내려줄 때

monsters라는 state는 여러 monster의 속성들이 객체의 형태로 담겨있는 배열이다.
parents에서 child로 monsters의 id / name / email이라는 속성을 내려주고자 한다.

AS-IS

function CardList({monsters}) {

  return(
  <div className="cardList">
    {monsters.map((monster)=>(
    <Card 
    	key={monster.id}
        id = {monster.id}
        name = {monster.name}
        email = {monster.email}
    />
    ))}
  </div>
  );
};

TO-BE

function CardList({monsters}) {

  return(
  <div className="cardList">
    {monsters.map((monster)=>(
    <Card key={monster.id} {...monster}/>
    ))}
  </div>
  );
};

2. child에서 받을 때

AS-IS

props를 불러와 필요한 속성앞에 props.을 붙이고 사용한다

function Card(props) {
  return (
  <div className="cardContainer">
    <img src ={`https://robohash.org/${props.id}?set=set2&size=180x180`} />
    <h2>{props.name}</h2>
    <p>{props.email}</p>
  </div>
  );
}

export default Card;

}

export default Card;

TO-BE

필요한 객체속성을 {}중괄호에 담아서 props.생략하고 사용한다

function Card({id, name, email}) {
  return (
  <div className="cardContainer">
    <img src ={`https://robohash.org/${id}?set=set2&size=180x180`} />
    <h2>{name}</h2>
    <p>{email}</p>
  </div>
  );
}

export default Card;

크-린 코드의 길은 멀고도 험한것..
그럼 20000....