6.18 Dev.Feedback (React #5 구조 분해 할당)

먼저 구조 분해 할당은 ES6의 등장과 함께 추가된 방식이다.

리액트에서 구조 분해를 사용하면 객체 안에 있는 필드 값을 원하는 변수에 대입할 수 있고,

간략하게 코드를 작성할 수 있어 가독성을 높이는 좋은 효과를 준다.

 

구조분해 기본 문법

let a, b, rest
[a,b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

[a,b, ...rest] = ['a', 'b', 'c', 'd', 'e']
console.log(a) // 'a'
console.log(b) // 'b'
console.log(rest) // ['c', 'd', 'e']

({a,b} = {a:1, b:2});
console.log(a); // 1
console.log(b); // 2

let x = ['a', 'b', 'c', 'd', 'e']
let [y, z] = x;
console.log(y) // 'a'
console.log(z) // 'b'

 

배열 구조 분해

const habits = ['swimming', 'reading', 'hometraining']

// 만일 habits 배열에서 favorite이라는 변수에 swimming을, havetodo라는 변수에 reading을 넣고 싶다면

// 변수명으로 할당하기

const favorite = habits[0];
const havetodo = habits[1];

// 구조분해 할당을 이용한 재할당

const [favorite, havetodo] = habits;
console.log(favorite) // 'swimming'
console.log(havetodo) // 'reading'
console.log(habits) // ['swimming', 'reading']

 

객체 구조 분해

const wannabe = {
	bodyweight : "-15kg",
    money : "over 1 million dollors",
    howtolive : "live with liberty"
    }
    
    
// 만일 객체 안의 money라는 property를 you can get으로 바꾸고 싶다면
// 변수명 재할당

const youCanGet = wannabe.money

console.log(wannabe.youCanGet) // "over 1 million dollors"

// 구조분해 할당을 이용한 재할당

const {money : youCanGet} = wannabe

console.log(wannabe.youCanGet) // "over 1 million dollors"
console.log(wannabe) 
// { bodyweight : "-15kg", money : "over 1 million dollors", 
// howtolive : "live with liberty"}

// 원본 객체의 값은 변하지 않지만, 새로운 변수에 원하는 값을 적용시킬 수 있다.

 

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

App.js와 그의 자식 컴포넌트인 Hero.js가 있다고 가정했을 때,

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

class App extends React.Component {
	render(){
    	return(
        	<div>
            	<Hero name = "Peter Parker" heroName = "Spidy" />
            </div>
          )
        }
     }

export default App

//Hero.js
import React from 'react';

const Hero = props => {
	return (
    	<div>
        	<h1>
            	Hello {props.name} friendly neigborhood {props.heroName}
            </h1>
        </div>
    )
}    

export default Hero

자식 컴포넌트인 Hero.js에서 App 객체에서 정의한 값을 쓰려면 props.key를 이용해야한다.

 

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

1. 함수의 인자 안에서 분해

//Hero.js
import React from 'react';

const Hero = ({name, heroName}) => {
	return (
    	<div>
        	<h1>
            	Hello {name} friendly neigborhood {heroName}
            </h1>
        </div>
    )
}    

export default Hero

2. 함수 본문 안에서 분해

//Hero.js
import React from 'react';

const Hero = props => {
	const { name, heroName } = props;
	return (
    	<div>
        	<h1>
            	Hello {name} friendly neigborhood {heroName}
            </h1>
        </div>
    )
}    

export default Hero

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

클래스 컴포넌트에서는 props 또는 state를 render() 내부에서 분해한다.

 

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

class App extends React.Component {
	render(){
    	return(
        	<div>
            	<Hero name = "Steven" heroName = "Doctor Strange" />
            </div>
          )
        }
     }

export default App

1. props

//Doctor.js
import React from 'react';

class App extends React.Component {
	render(){
    const {name, heroName } = this.props
    return(
        	<h1>
            	I'm {name} and my nickname is {hero}
            </h1>
          )
        }
     }

export default Doctor

2. State

//Doctor.js
import React from 'react';

class Doctor extends React.Component {
	render(){
    const {name, heroName } = this.props
    const { state1, state2} = this.state
    return(
        	<h1>
            	I'm {name} and my nickname is {hero}
            </h1>
          )
        }
     }

export default Doctor