React 구조분해할당

1. 구조분해할당

State

이벤트 객체의 value값을 가져오고 싶을 때 이렇게 사용한다.

구조분해 할당을 사용하지 않았을 때

const onChange = (event) => {
  setState(event.target.value);
};

구조분해 할당을 사용했을 때,

구조분해할당을 사용하지 않고도 사용할수는 있지만 타고 타고 들어갈 때 길어지게 되면서 가독성을 해치는 결과를 얻게되어 구조분해 할당을 사용한다.

const onChange = (event) => {
  const { value } = event.target;
  // event.target.value
};

 

이벤트 객체에 대한 내용이 아니라 일반객체여도 이렇게 사용할 수 있다.

person이라는 객체의 { }를 벗겨냈기 때문에 console.log(name, age)라고 작성해도 값이 출력되는 것이다.

let person = {
  name: "minseok",
  age: 20
};

let { name, age } = person;
// person.name
// person.age

console.log(name, age); // minseok 20

 

props

부모 컴포넌트로부터 데이터를 받아올 때도 사용할 수 있다.

• 처음 세팅은 상수데이터로 DATA를 선언해서 CardList라는 컴포넌트에게 넘겨준다.

function Monsters() {
  const DATA = {
    id: 1,
    name: "Leanne Graham",
    username: "Bret",
    email: "Sincere@april.biz",
    address: {
      street: "Kulas Light",
      suite: "Apt. 556",
      city: "Gwenborough",
      zipcode: "92998-3874"
    }
  };

  return (
    <div className="monsters">
      <h1>컴포넌트 재사용 연습!</h1>
      <CardList CardList={DATA} />
    </div>
  );
}

• Monsters라는 컴포넌트에서 넘겨받은 데이터를 사용하려면 두 가지 방법이 있는데, 구조분해할당을 사용하는 방법과 사용하지 않는 방법이 있다. 먼저 사용하지 않는 방법을 소개하자면 코드는 이렇다.

function CardList(props) {
  return (
    <div className="cardList">
      <p>{props.CardList.name}</p>
    </div>
  );
}

p태그 안에 있는 값의 형태를 보자. 먼저 { }가 있고 그 안에 props.CardList.name이라고 적혀있는데, 이것을 표현하면 이 아래의 코드와 같다. 내가 원한건 name이라는 키에 들어있는 값이기 때문에 props에서 CardList라는 키에 접근하고 CardList에서 name이라는 키에 접근하는 것이다.

const props = {
  CardList: {
    name: "Leanne Graham"
  }
};

• 다음은 구조분해를 사용하는 것이다. 애초에 구조분해라는 것이 무엇일까? { }를 벗긴다고 하는 표현이 맞을 것 같다.props를 벗겨냈다? 라는 표현이 맞을 것이다.

CardList: {
  name: "Leanne Graham";
}

props를 벗겨냈기 때문에 CardList.name으로 접근하면 된다. 다만 벗겨낸 이후의 키를 인자로 받아야한다.

어떻게 하냐면…

function CardList({ CardList }) {
  return (
    <div className="cardList">
      <p>{CardList.name}</p>
    </div>
  );
}

• 객체 안의 객체 데이터에 접근하는 구조분해 할당

const CardList = ({
  CardList: {
    address: { street }
  }
}) => {
  return <div>{street}</div>;
};

• 해당 컴포넌트에서 사용할 데이터 추가하기

few = “11”은 위의 상수데이터에서는 없는 데이터를 추가한 것이다.

const CardList = ({ CardList: { id, name, email, few = "11" } }) => {
  return <div>{few}</div>;
};