[React] 구조 분해 할당 (Destructuring)

구조 분해 할당이란?

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

Clean Code를 위해서 사용한다.

1- 객체 구조 분해 할당

function buildAnimal(animalData) {
	let accessory = animalData.accessory, 
		animal = animalData.animal,
		color = animalData.color,
		hairType = animalData.hairType;
}

let obj = {
	accessory: 'horn',
	animal: 'horse',
	color: 'pupple',
	hairType: 'curly'
}

function buildAnimal(animalData){
	let {accessory, animal, color, hairType} = animalData;
}

let person = {
	name: 'Maya',
	age: 30,
	phone: '123',
	address: {
		zipcode: 1234,
		street: 'rainbow',
		number: 42
	}
}

let {address: {zipcode, street, number}} = person;
console.log(zipcode, street, number); // 1234 rainbow 42 

2- 배열 구조 분해 할당

const week = ['mon', 'tue', 'wed', 'thu', 'fri'];
const [day1, day2, day3, day4, day5] = week;

const numbers = [1, 2, 3, 4, 5, 6];
const [,,three,,five] = numbers;

const studentDetails = {
	firstName: 'John',
	lastName: 'Mary'
}

const {firstName: fName = 'not given', lastName} = studentDetails;

console.log(fName); // John
console.log(lastName); // Mary 

var people = [
	{
		name: 'Mike Smith',
		family: {
			mother: 'Jane Smith',
			fater: 'Harry Smith',
			sister: 'Samantha Smith'
			},
		age: 35
	}, 
	{
		name: 'Tom Jones',
		family: {
			mother: 'Norah Jones',
			fater: 'Richard Jones',
			sister: 'Howard Jones'
			},
		age: 25
	}, 
];

for (var {name: n, family: {father: f} } of people) {
	console.log("Name: " + n + ", Father: " + f);
}

// Name: Mike Smith, Father: Harry Smith
// Name: Time Jones, Father: Richard Jones 

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

a. useState

function Login() {
	const [inputValue, setInputValue] = useState({
		email: "",
		password: "",
	});

	const { email, password } = inputValue;

	const handleInput = (e) => {
		const { name, value } = e.target;
		setInputValue({
			...inputValue,
			[name]: value,
		});
	};

	return (
		<from className="loginInput">
			<input name="email" onChange={handleInput} />
			<input name="password" onChange={handleInput} />
		</form>
	);
}

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

Main.js

function Main() {
	return (
		<>
			<ul className="message-list">
				{comments.map((elements, index) => {
					return <ComponentsNaeun key={index} elements={elements} />;
				})}
			</ul>
		</>

Components.js (props.key를 사용, 구조 분해 할당을 하지 않았음)

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 값을 전달할 수 있다.

1. 인자 안에서의 구조 분해 할당

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>
		</>
	);
}

2. 본문 안에서의 구조 분해 할당

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>
		</>
	);
}