구조 분해 할당

류창선·2023년 9월 9일
0

front-end

목록 보기
31/39
post-thumbnail

구조 분해 할당

  • JavaScript에서 객체와 배열은 사용 빈도가 높은 자료 구조
  • 객체와 배열에 저장된 데이터를 전체가 아닌 부분만 추출하여 사용하고자 할 때의 번거로움을 줄이고자 구조 분해 할당을 사용
  • 구조 분해 할당은 객체와 배열을 '변수'로 분해할 수 있음

구조 분해 할당 종류

// 개별 할당
const Child = (props) => {
	const animal = props.animal;
	const mentor = props.mentor;

	return (
		<>
			<span>{props.animal}</span>
			<span>{props.mentor}</span>
		</>
	)
}

// 구조 분해 할당 (1): 객체
const Child = (props) => {
	const { animal, mentor } = props;

	return (
		<>
			<span>{animal}</span>
			<span>{mentor}</span>
		</>
	)
}

// 구조 분해 할당 (2): 배열 
const Test = () => {
	const array = [tiger, lion];
	const [tiger, lion] = array;

	return (
		<>
			<p>tiger</p>
			<p>lion</p>
		</>
	)
}
profile
Front-End Developer

0개의 댓글