[React] ustState 예제 - 구조분해할당, Map

---

📌 React State 사용하기 – Form 입력 처리 (Ex03_Form02)

회원 정보를 입력받는 폼을 만들고, 입력된 값을 profile이라는 하나의 객체(state)로 관리하는 방법을 정리해보자.

---

1️⃣ 기본 개념

• 이름, 나이, 이메일을 입력받는 input 태그 작성
• 입력 시 inputUpdate 함수 호출
• 입력된 값의 name과 value를 콘솔에 출력

 

const inputUpdate = (e) => {
const { name, value } = e.target;
console.log(name, value);
};

 

👉 객체 비구조화 할당

 

const { name, value } = e.target;

 

• e.target에 있는 name, value를 간편하게 추출
• 코드 가독성이 좋아짐

---

2️⃣ State를 사용하지 않았을 때

• 입력은 가능하지만 화면에는 값이 보이지 않음
• 이유: state로 값을 관리하지 않기 때문

---

3️⃣ State에 값 저장하기

입력값을 profile 객체에 저장하도록 수정한다.

const [profile, setProfile] = useState({
name: "",
age: "",
email: ""
});

const inputUpdate = (e) => {
const { name, value } = e.target;

setProfile({
...profile,
[name]: value
});
};

---

4️⃣ 전개 연산자 (Spread Operator)

 

...profile

 

• 기존 profile 객체의 값을 그대로 복사
• 새로운 값만 덮어쓰기 가능

👉 즉,

• 기존 값 유지
• 변경된 값만 업데이트

---

5️⃣ 대괄호([])의 중요성 (동적 속성)

 

[name]: value

 

• name 값을 속성 이름으로 사용

❗ 만약 대괄호를 사용하지 않으면:

 

name: value

 

→ "name"이라는 문자열 키가 추가됨 (의도와 다름)

✔ 대괄호 사용 시:

• 입력한 name 값 (name, age, email)에 따라
• 동적으로 객체 속성 생성 가능

---

✅ 정리

• e.target에서 name, value 추출
• useState로 객체 형태 관리
• spread operator로 기존 값 유지
• [name]으로 동적 key 설정

👉 이렇게 하면 하나의 함수로 여러 input을 효율적으로 관리할 수 있다.

 

 

 

 

 

 

 

 

 

구조분해 할당을 통해 { } 로 받을 수 있다. 길게 쓰지 않고 한번에 받을 수 있어서 좋다.
const {name, value} e.target; 구조분해 할당 state에 Object저장

키가 중복되면 추가되는게 아니라 기존 값을 변경하면서 데이터를 복사해준다. 

과일 샵 예제 함수 (구조분해할당+map함수 사용)

import './Item.css';

// const Item = (props) => {
//   return (
//     <div className="box">
     
//       <img src={props.imgName} alt="수박"/>
      
//      <h5>{props.text}</h5>
//      <span>{props.price}원</span>
//     </div>
//   );
// };


const Item = ({imgName, text, price}) => {
  return (
    <div className="box">
     
      <img src={imgName} alt="수박"/>
      
     <h5>{text}</h5>
     <span>{price}원</span>
    </div>
  );
};

export default Item;

import Item from './Item';
import a from '../assets/images/a.png';
import b from '../assets/images/b.jpg';
import c from '../assets/images/c.png';
import d from '../assets/images/d.jpg';

import './Ex05_Product.css';

const Ex05_Product = () => {
  return (
    <div id="product">
       <h3>오늘의 상품</h3>
       <p>새로운 상품을 만나보세요</p>
       <Item imgName={a} text="당도선별 11brix" price="25,000"/>
       <Item imgName={b} text={"국내산 프리미엄"} price={"35,000"}/>
       <Item imgName={c} text={"13brix 100%국내산"} price={"28,000"}/>
       <Item imgName={d} text={"고당도 참박수박"} price={"20,000"}/>
       <Item imgName={c} text={"13brix 100%국내산"} price={"28,000"}/>
       <Item imgName={d} text={"고당도 참박수박"} price={"20,000"}/>
       
    </div>
  );
};

export default Ex05_Product;

기존 위에  jsx를 아래처럼 구조분해할당 바꿔서도 사용

import Item from './Item';
import a from '../assets/images/a.png';
import b from '../assets/images/b.jpg';
import c from '../assets/images/c.png';
import d from '../assets/images/d.jpg';

import './Ex03_Product.css';

const Ex05_Product = () => {
  const item=[
  {id:1, imgName:a, text:"당도선별 11brix", price:"25,000"},
  {id:2, imgName:b, text:"국내산 프리미엄", price:"35,000"},
  {id:3, imgName:c, text:"13brix 100%국내산", price:"28,000"},
  {id:4, imgName:d, text:"고당도 참박수박", price:"20,000"},
  {id:5, imgName:c, text:"13brix 100%국내산", price:"28,000"},
  {id:6, imgName:d, text:"고당도 참박수박", price:"20,000"},
  ]
  return (
    <div id="product">
       <h3>오늘의 상품</h3>
       <p>새로운 상품을 만나보세요</p>
        {item.map((item)=><Item key={item.id} imgName={item.imgName} text={item.text} price={item.price}/>)}    
       {/* <Item imgName={a} text="당도선별 11brix" price="25,000"/>
       <Item imgName={b} text={"국내산 프리미엄"} price={"35,000"}/>
       <Item imgName={c} text={"13brix 100%국내산"} price={"28,000"}/>
       <Item imgName={d} text={"고당도 참박수박"} price={"20,000"}/>
       <Item imgName={c} text={"13brix 100%국내산"} price={"28,000"}/>
       <Item imgName={d} text={"고당도 참박수박"} price={"20,000"}/> */}
       
    </div>
  );
};

export default Ex05_Product;