2021.02.21 / React - 비구조화 할당

비구조화 할당

const Myname = ({ name }) => {
    return <div>안녕하세요! 제 이름은 {name} 입니다.</div>
};

Myname.defaultProps = {
    name: 'developer'
};

출력 값 : 안녕하세요! 제 이름은 developer 입니다.

위의 컴포넌트는 함수형 컴포넌트로 ({ name })은 객체 형태의 파라미터로 객체 내부에 있는

name 값은 props로 받아와서 값을 사용하는 구조이다.

함수형 컴포넌트와 클래스형 컴포넌트의 차이점은 State와 LifeCycle의 기능이 빠져있다.

함수형 컴포넌트는 초기 마운트 속도가 미세하게 빠르고 불필요한 기능이 없어서 메모리 자원도 덜 사용한다.

그 때문에 단순히 어떤 값을 받아와서 보여주기만 하는 용도일 때 주로 사용한다.

 

 

참고

- www.youtube.com/watch?v=tZLQ-cNCf70&list=PL9FpF_z-xR_E4rxYMMZx5cOpwaiwCzWUH&index=8