React 8일차

상태 업데이트

1. useState 새로운 값 업데이트

// const [변수, 변경함수] = useState(초기값)
// useState를 사용한 변수 업데이트는 변경함수를 사용해야 가능
// filter 함수를 통해 반환된 새로운 배열을 변경함수에 넣어 업데이트

const [member, setMember] = useState(data);
const deleteMember = memberId => setMember(member.filter(item => item.id !== memberId))

컴포넌트

import { useState } from 'react';
import data from './../data/newjeans.json'
import classes from './Newjeans.module.css'

export default function Newjeans() {

  const [member, setMember] = useState(data);
  const deleteMember = memberId => setMember(member.filter(item => item.id !== memberId))

  return (
    <section>
      {
        member.map((item) => {
          return (
            <figure key={item.id}>
              <img src={item.imgURL} alt={`뉴진스 ${item.name}`} />
              <h4>{item.name}</h4>
              <p>생일: <span>{item.birth}</span></p>
              <p>MBTI: <span>{item.MBTI}</span></p>
              <div className={classes.btn_wrapper} role='none'>
                <button onClick={() => deleteMember(item.id)} type='button' className={classes.btn}>👍좋아요 {item.like}</button>
              </div>
              <figcaption className='sr_only'>{`뉴진스 ${item.name}`}</figcaption>
            </figure>
          )
        })
      }
    </section>
  )
}

2. useState 이전 상태 기반 업데이트

// const [변수, 변경함수] = useState(초기값)
// useState를 사용한 변수 업데이트는 변경함수를 사용해야 가능
// 업데이트가 완료된 이전 값을 매개변수로 받아 업데이트

const [member, setMember] = useState(data);
const deleteMember = memberId => setMember(member => member.filter(mem => mem.id !== memberId))

컴포넌트

import { useState } from 'react';
import data from './../data/newjeans.json'
import classes from './Newjeans.module.css'

export default function Newjeans() {

  const [member, setMember] = useState(data);
  const deleteMember = memberId => setMember(member => member.filter(mem => mem.id !== memberId))

  return (
    <section>
      {
        member.map((item) => {
          return (
            <figure key={item.id}>
              <img src={item.imgURL} alt={`뉴진스 ${item.name}`} />
              <h4>{item.name}</h4>
              <p>생일: <span>{item.birth}</span></p>
              <p>MBTI: <span>{item.MBTI}</span></p>
              <div className={classes.btn_wrapper} role='none'>
                <button onClick={() => deleteMember(item.id)} type='button' className={classes.btn}>👍좋아요 {item.like}</button>
              </div>
              <figcaption className='sr_only'>{`뉴진스 ${item.name}`}</figcaption>
            </figure>
          )
        })
      }
    </section>
  )
}

---

객체 및 배열 상태 업데이트 (합성 패턴)

새로운 변수 객체를 만들고
변수변경함수를 사용
이때, 기존 값과 새로운 값에 각각 spread syntax를 사용

const addMember = () => {
  const newMember = {
    ...data[0],
    id: crypto.randomUUID(),
  }
  setMember([...member, { ...newMember }])
}

컴포넌트

import { useState } from 'react';
import data from './../data/newjeans.json'
import classes from './Newjeans.module.css'


export default function Newjeans() {

  const [member, setMember] = useState(data);
  const deleteMember = memberId => setMember(member.filter(item => item.id !== memberId))

  const addMember = () => {
    const newMember = {
      ...data[0],
      id: crypto.randomUUID(),
    }
    setMember([...member, { ...newMember }])
  }

  return (
    <section>
      <button className={classes.addBtn} onClick={addMember} >+ 추가</button>
      {
        member.map((item) => {
          return (
            <figure key={item.id}>
              <img src={item.imgURL} alt={`뉴진스 ${item.name}`} />
              <h4>{item.name}</h4>
              <p>생일: <span>{item.birth}</span></p>
              <p>MBTI: <span>{item.MBTI}</span></p>
              <div className={classes.btn_wrapper} role='none'>
                <button type='button' className={classes.btn}>👍좋아요 {item.like}</button>
                <button className={classes.deleteBtn} onClick={() => deleteMember(item.id)} >삭제</button>
              </div>
              <figcaption className='sr_only'>{`뉴진스 ${item.name}`}</figcaption>
            </figure>
          )
        })
      }
    </section>
  )
}