728x90
반응형
React 를 공부하다가 '비구조화 할당' 이라는 개념에 대해서 확실히 정리하고 넘어가고 싶어져서 쓰는 포스팅!
비구조화 할당이란
비구조화 할당(Destructuring Assignment)은 배열이나 객체의 속성을 해체해서
그 값을 개별 변수에 담을 수 있게 하는 JavaScript 의 표현식이다.
쓰는 이유
이는 배열이나 객체의 속성을 쉽게 꺼내서 변수에 할당할 수 있으므로
더 간결하고 가독성이 높은 코드를 작성할 수 있다
예시
예를 들어 다음과 같은 객체가 있을 때,
const person = {
name: 'John',
age: 30,
gender: 'male'
};
이 객체의 속성을 꺼내서 개별 변수에 할당하려면 다음과 같이 할 수 있다.
const name = person.name;
const age = person.age;
const gender = person.gender;
하지만 비구조화 할당을 이용하면 다음과 같이 더 간결하게 작성할 수 있다.
const { name, age, gender } = person;
응용
예를 들어 다음과 같은 컴포넌트가 있다고 해보자.
function Person(props) {
return (
<div>
<p>Name: {props.name}</p>
<p>Age: {props.age}</p>
</div>
);
}
만약에 비구조화 할당 개념을 사용한다면 이렇게 바꿀 수 있다.
function Person({ name, age }) {
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
</div>
);
}
이렇게 작성하면 함수 내에서 props.name 대신 name으로 변수를 사용할 수 있어
코드가 더 간결해지고 가독성이 높아진다.
728x90
반응형