구조 분해 할당 문법은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. (출처: MDN)
쉽게 말해 배열이나 객체를 쪼개어 필드 값을 변수에 담을 수 있다. 아래의 예제를 살펴보자.
const fruits = ['apple', 'berry', 'banana'];
const [one, two, three] = fruits;
console.log(one, two, three); // 'apple', 'berry'. 'banana'
const age = [20, 25, 40];
const ['Kim', 'Lee'] = age;
console.log('Kim', 'Lee'); // 20, 25
선언이 분리 되어도 구조 분해를 통해 값을 할당할 수 있다.
let Kim, Lee;
[Kim, Lee] = [20, 25];
console.log(Kim); // 20
console.log(Lee); // 25
const apple = {
type: 'fruit',
color: 'red',
shape: 'circle'
}
const { type, color, shape } = apple;
console.log(type, color, shape); // 'fruit', 'red', 'circle'
function Login() {
const [inputValue, setInputValue] = useState({
email: '',
password: '',
});
const { eamil, password } = inputValue;
const handleInput = event => {
const { name, value } = event.target;
setInputValue({
...inputValue,
[name]: value,
});
};
return (
<form className='loginInput'>
<input name='email' onChange={handleInput} />
<input name='password' onChange={handleInput} />
</form>
);
}
아래 코드는 Main.js와 Main.js의 자식 컴포넌트인 Components.js 파일이다.
// Main.js
function Main() {
return (
<>
<ul className="message-list">
{comments.map((elements, index) => {
return <ComponentsNaeun key={index} elements={elements} />;
})}
</ul>
</>
// Components.js
function Components(props) {
return (
<>
<li className="message-list-box">
<div>
<span className="message-list-id">ex id</span>
<span className="message-list-content">{props.elements}</span>
</div>
<button className="message-list-delete-button">X</button>
</li>
</>
);
}
위처럼 props.key를 사용하지 않고 구조 분해 할당을 통해 props 값을 전달할 수 있다.
function Components({ elements }) {
return (
<>
<li className="message-list-box">
<div>
<span className="message-list-id">ex id</span>
<span className="message-list-content">{elements}</span>
</div>
<button className="message-list-delete-button">X</button>
</li>
</>
);
}
function Components(props) {
const { elements } = props;
return (
<>
<li className="message-list-box">
<div>
<span className="message-list-id">ex id</span>
<span className="message-list-content">{elements}</span>
</div>
<button className="message-list-delete-button">X</button>
</li>
</>
);
}