리액트를 공부하다가 useState를 객체 단위로 관리해서 사용할 때 아주 중요하고 유용하다는 걸 깨달았다.
그래서 이 스프레드 연산자에 대한 이해가 좀 필요할 거 같다.
수많은 방법들의 응용이 있겠지만 나는 간단하게 이게 리액트에서 왜 중요한지 좀 보고자 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
<script>
const test = {
name: 'jay',
age: 27,
job: {title: 'developer', level: 'junior'},
};
let practice = {...test, age: 33};
console.log(test);
console.log(practice);
</script>
</html>
스프레드 연산자는 배열도 가능하고 객체도 가능하다. 나는 객체로 연습을 해봤다.
스프레드 연산자는 { ...test }를 하면 변수에 이 test의 값이 펼쳐져서 복사가 된다.
뒤에 쉼표(,)를 붙이고 값이 넣으면 해당 값이 덮어 씌여져서 복사가 된다.
이게 그렇다면 왜 리액트에서 중요한가?
import React from 'react';
import {useState} from 'react';
export default function AppPractice() {
const [practice, setPractice] = useState({
name: 'jay',
age: 27,
job: {title: 'developer', level: 'junior'},
});
return (
<div>
<h1>이름 : {practice.name}</h1>
<h1>나이 : {practice.age}</h1>
<h1>직업 : {practice.job.title}</h1>
<h1>레벨 : {practice.job.level}</h1>
<button
onClick={() => {
const name = prompt('이름을 입력해주세요');
setPractice(prev => ({
...prev,
name: name,
}));
}}
>
이름변경
</button>
</div>
);
}
리액트에서 객체 단위로 상태를 관리할 때 이 스프레드 연산자가 없으면 진행하기 힘들 정도로 중요하다고 생각한다.
이전 객체의 값을 나열해서 값을 덮어 씌워서 상태를 업데이트 해야기 때문에 스프레드 연산자는 매우 중요하며 객체 안의 객체의 상태도 업데이트 할 때 매우 유용하며 필수적이다.
import React from 'react';
import {useState} from 'react';
export default function AppPractice() {
const [practice, setPractice] = useState({
name: 'jay',
age: 27,
job: {title: 'developer', level: 'junior'},
});
return (
<div>
<h1>이름 : {practice.name}</h1>
<h1>나이 : {practice.age}</h1>
<h1>직업 : {practice.job.title}</h1>
<h1>레벨 : {practice.job.level}</h1>
<button
onClick={() => {
const name = prompt('이름을 입력해주세요');
setPractice(prev => ({
...prev,
name: name,
}));
}}
>
이름변경
</button>
<button
onClick={() => {
const level = prompt('레벨을 입력해주세요');
setPractice(prev => ({
...prev,
job: {...practice.job, level: level},
}));
}}
>
레벨변경
</button>
</div>
);
}
'Javascript' 카테고리의 다른 글
| Array.includes에 대하여 (0) | 2025.02.09 |
|---|---|
| Array.sort를 쓸 때 주의사항(Javascript) (0) | 2023.10.26 |
| Shooting Game 리뷰 <코딩 알려주는 누나 게임 만들기 영상> (0) | 2023.02.02 |
| 모든 제이쿼리 코드를 자바스크립트로 바꿀 순 없나??? (0) | 2022.12.28 |