TIL 20_구조 분해 할당 📝

dudgus5766·2021년 8월 24일

React TIL js 객체 구조분해할당

React

목록 보기

2/8

구조 분해 할당에 대해 들어보셨나요? ~~전 처음 들어봤답니다^0^...~~
Westagram 작업을 하다 마주친 구조 분해 할당을 이해하고 정리해본다!

구조 분해 할당(Destructuring assignment)

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

//배열 구조 분해
const points = [20, 30, 40];
const [x, y, z] = points;
console.log(x, y, z); // 20 30 40 

//객체 구조 분해

// ES5 
const car = {
 type: 'Toyota',
 color: 'Silver',
 model: 2007
};

const type = car.type;
const color = car.color;
const model = car.model;

console.log(type, color, model); // Toyota Silver 2007

// ES6
const {type, color, model} = car;
console.log(type, color, model); // // Toyota Silver 2007

리액트에서의 구조 분해 할당

// App.js
import React from 'react';
import List from './List'

class App extends React.Component {
  state = {
      id : 1,
      userName : "younghyun"
    };
  render() {
    return (
      <div>
        <List userName = {this.state.userName}/>
      </div>
    )
  }
}

export default App

// List.js
import React from 'react'

class List extends React.Component {
  render(){
  return (
    <div>
      <h1>
        Hello {this.props.userName}
      </h1>
    </div>
  )
}
};

export default List

App에서 정의한 state 값을 사용하려면 기본적으로 아래와 같이this.props.key로 쓸 수 있다. 여기에서 key는 props를 정의할 때 임의로 붙인 실제로 우리가 전달하고자하는 value의 이름이다.

함수 컴포넌트에서의 구조 분해 할당

함수의 인자 안에서 분해

const List = ({ userName, id }) => { // props 객체가 여기로 전달되므로, 이 자리에서 직접 프로퍼티를 추출할 수 있다. 
  console.log(name) // younghyun
  return (
    <div>
      <h1>
        Hello {userName} // userName의 value가 출력된다. 
      </h1>
    </div>
  )
}

함수의 본문 안에서 분해

const List = props => {
  const { userName, id } = props;
  return (
    <div>
      <h1>
        Hello {userName} // userName의 value가 출력된다.
      </h1>
    </div>
  )
}

클래스 컴포넌트에서의 구조 분해 할당

진행중인 프로젝트 중에 구조 분해 할당을 쓰게되어 클래스 컴포넌트의 예시는 직접 쓴 코드를 가져왔다!

import AllFeeds from "../components/AllFeeds";


class Main extends Component {
  state = {
    feeds: [],
  };


  render() {
    return (
      <div className="main">
        <Nav />
        <div className="margin-value">
          <AllFeeds
            feeds={this.state.feeds} // state에서 가지고 있는 feeds 를 feeds 로 넘기게 된다.
            onDelete={this.handleDelete}
            onAdd={this.handleAdd}
          />
          <Aside />
        </div>
      </div>
    );
  }
}

state 를 가지고 있는 메인에서state 값을 쓰기 위해 AllFeeds 컴포넌트로 값을 넘기게 된다.(handleDelete와 handleAdd 함수는 생략)

class AllFeeds extends Component {
  render() {
    const { onDelete, onAdd, feeds } = this.props;
    return (
      <div className="feeds-align">
        {feeds.map(feed => (
          <Feeds
            feed={feed}
            comments={feed.comments}
            onDelete={onDelete}
            onAdd={onAdd}
          />
        ))}
      </div>
    );
  }
}

export default AllFeeds;

함수에서 뿐만 아니라 render 함수 안에서도 state, props 객체에 비구조화 할당을 적용해 코드를 간결하게 할 수 있다.
const { onDelete, onAdd, feeds } = this.props; 이 문장을 통해 onDelete, onAdd, feeds 라는 변수에 state 값을 할당해 코드가 간결해졌다!

💡 마치며!

얼마 전까지 벨로그 상단에 있던 정준하의 ~~북극곰~~ 구조분해할당 썸네일..지선님이 쓰신 글을 읽으며 편해보이는데 이런 건 언제 쯤 쓸 수 있을까 걱정했는데 이렇게 바로 쓰게 될 줄은 몰랐다.
간결하고 깔끔한 코드를 만들 수 있는 구조 분해 할당..안 쓸 이유가 없다!!