6.10 Recap
<input
{...register("Firstname", {
required : true,
// 방법1: 무조건 통과X
// validate: (value) => false,
// 방법1 : rami를 포함하지 않으면 통과
// validate: (value) => !value.includes("rami"),
// 방법3 : 위와 같음 but 삼항연산자로 표현
// validate: (value) => value.includes("rami") ? "no rami is allowed" : true,
// 방법4 : 여러개의 조건
validate : {
noRami : (value) => value.includes("rami") ? "no rami is allowed" : true,
noRame : (value) => value.includes("rame") ? "no rame is allowed" : true,
}
})}
placeholder="Write a Firstname"
/>6.11 ❤️🔥어려움
✅ 1단계: 기본 객체 예시
const user = {
name: "민수",
age: 25,
};일반 방식 (전체 받아서 꺼내기)
function greet(user: { name: string; age: number }) {
console.log(user.name); // 민수
console.log(user.age); // 25
}구조 분해 방식 (필요한 것만 바로 꺼내기)
function greet({ name, age }: { name: string; age: number }) {
console.log(name); // 민수
console.log(age); // 25
}➡ user.name을 안 쓰고 name만 바로 쓸 수 있음. 가독성 향상, 코드 간결
✅ 2단계: ToDo 예시랑 똑같이 해보기
타입 정의
interface IForm {
toDo: string;
}일반 방식
const handleValid = (data: IForm) => {
console.log(data.toDo); // "React 공부하기"
};구조 분해 방식
const handleValid = ({ toDo }: IForm) => {
console.log(toDo); // "React 공부하기"
};💬 (data)라는 껍데기 없이, 바로 toDo를 꺼내 쓰는 것.
정확히는:
const handleValid = (data) => {
const toDo = data.toDo;
}이걸 한 줄로 축약한 게:
const handleValid = ({ toDo }) => { ... }✅ 3단계: 실제 react-hook-form 코드에서 비교
interface IForm {
email: string;
password: string;
}
// 일반 방식
const onSubmit = (data: IForm) => {
console.log(data.email);
console.log(data.password);
}
// 구조 분해
const onSubmit = ({ email, password }: IForm) => {
console.log(email);
console.log(password);
}✅ 4단계: 배열 구조 분해
const fruits = ["🍎", "🍌", "🍓"];
// 일반
const first = fruits[0];
const second = fruits[1];
// 구조 분해
const [first, second] = fruits;
console.log(first); // 🍎
console.log(second); // 🍌✅ 정리
| 형태 | 예시 | 설명 |
|---|---|---|
| 객체 구조 분해 | ({ toDo }) => {} | data.toDo 대신 toDo 바로 꺼냄 |
| 배열 구조 분해 | [a, b] = arr | 인덱스 접근 없이 바로 변수에 저장 |
구조분해할당
알겠습니다! 아래는 벨로그용으로 복사해서 붙여넣기만 하면 되도록 마크다운 스타일로 정리한 구조 분해 할당 포스팅입니다.
# 🧠 구조 분해 할당(Destructuring Assignment) 완전 정리
JavaScript/TypeScript에서 자주 쓰이는 **구조 분해 할당** 개념과 실제 사용 예시를 `react-hook-form`, `recoil` 코드와 함께 정리했습니다.
특히 React로 폼 만들거나 props 다룰 때 자주 헷갈리는 분들을 위해 간단한 예시부터 실무 적용 포인트까지 담았습니다.
---
## ✅ 구조 분해 할당이란?
> 객체나 배열에서 값을 꺼내서, 변수에 **한 줄로 할당하는 문법**입니다.
---
## 🔹 1. 객체 구조 분해 기본 예시
```ts
const user = {
name: "철수",
age: 25,
};
// 일반 방식
const name1 = user.name;
const age1 = user.age;
// 구조 분해 방식
const { name, age } = user;
console.log(name); // "철수"
console.log(age); // 25🔹 2. 함수 파라미터에서 구조 분해
interface IUser {
name: string;
age: number;
}
// 일반 방식
function greet(user: IUser) {
console.log(user.name);
}
// 구조 분해 방식
function greet({ name }: IUser) {
console.log(name);
}
user.name대신name을 바로 꺼낼 수 있어서 간결하고 깔끔합니다.
🔹 3. react-hook-form 예시
interface IForm {
email: string;
password: string;
}
// 일반 방식
const onSubmit = (data: IForm) => {
console.log(data.email);
console.log(data.password);
}
// 구조 분해 방식
const onSubmit = ({ email, password }: IForm) => {
console.log(email);
console.log(password);
}구조 분해 방식은
data.없이 변수로 바로 접근 가능해서 코드가 훨씬 깔끔합니다.
🔹 4. 구조 분해가 불리한 상황 (주의할 때)
| 상황 | 일반 방식이 나은 이유 |
|---|---|
| 속성이 너무 많을 때 | 구조 분해가 길어져서 가독성 ↓ |
| 지역 변수랑 이름 충돌 | 이름이 겹쳐 헷갈릴 수 있음 |
| 객체 전체가 필요할 때 | 구조 분해하면 객체를 못 넘김 (예: API 요청 시) |
🔹 5. 자주 쓰는 구조 분해 문법 확장
▶ 이름 바꾸기 (alias)
const user = { name: "민수" };
const { name: userName } = user;
console.log(userName); // "민수"▶ 기본값 지정
const user = {};
const { name = "익명" } = user;
console.log(name); // "익명"🔹 6. 배열 구조 분해도 있다
const fruits = ["🍎", "🍌", "🍓"];
const [first, second] = fruits;
console.log(first); // 🍎
console.log(second); // 🍌✅ 요약
| 항목 | 설명 |
|---|---|
| 정의 | 객체나 배열에서 값을 꺼내는 문법 |
| 장점 | 변수 접근 편리, 코드 간결 |
| 단점 | 구조가 복잡하면 가독성 ↓ |
| 팁 | 1~2개만 꺼낼 땐 구조 분해, 많을 땐 일반 방식 추천 |
✅ 실전에서
useForm,useParams,props받을 때 구조 분해 자주 사용- 예시:
const { register, handleSubmit } = useForm<FormData>();
const onSubmit = ({ email }: FormData) => console.log(email);
- 단, 너무 많은 필드를 받을 땐 구조 분해보다
data.방식이 더 나을 수도 있음
6.15 배열 수정
6.16 Selector
Selector : atom의 output을 변형시키는 도구.
YOLO