리액트 입문(추가 및 삭제 기능)

import React, { useState } from 'react';
import './App.css';

function App() {

  const [users, setUsers] = useState([
    { id: 1, age: 30, name: '송중기' },
    { id: 2, age: 24, name: '송강' },
    { id: 3, age: 21, name: '김유정' },
    { id: 4, age: 29, name: '구교환' }
  ])

  const [name, setName] = useState('')
  const [age, setAge] = useState('')

  const nameChangeHandler = (event) => {
    setName(event.target.value)
  }

  const ageChangeHandler = (event) => {
    setAge(event.target.value)
  }

  const clickAddButton = () => {
    const newOne = {
      id: users.length + 1,
      age: age,
      name: name
    }
    setUsers([...users, newOne])
  }

  const deleteBtn = (id) => {
    const newUsers = users.filter((a) => {
      return a.id !== id
    })
    setUsers(newUsers)
  }

  return (
    <>
      <div className='input'>
        이름 : &nbsp;
        <input className='input-area'
          value={name}
          onChange={nameChangeHandler}
        />

        <br />

        나이 : &nbsp;
        <input className='input-area'
          value={age}
          onChange={ageChangeHandler}

        />

        <button style={{ marginLeft: "10px" }}
          onClick={clickAddButton}>저장</button>
      </div>

      <div className='app-style'>
        {
          users.map((item) => {
            return (<div key={item.id} className='squareStyle'>
              {item.age} - {item.name}
              <button onClick={() => deleteBtn(item.id)}>x</button>
            </div>)
          })
        }
      </div>
    </>
  )
}

export default App;

배열 내에 있는 객체를 useState로 감싸서 변경 가능한 상태로 만들어줬다. 

 

return 문 내부에 있는 해당 코드를 보면 배열 형태인 users에 map()을 사용해서 배열 내의 객체가 하나씩 item에 들어오게 했고 

{item.age} - {item.name} 과 x 버튼이 리턴되게 했다. 

즉, 페이지가 실행될 때 자동으로 map함수를 사용해 users 배열내의 객체들이 렌더링되게 되는 것이다. 

 

이름과 나이를 입력 받는 input을 만들고 입력되는 값인 value를 {age}로 설정했고, onChange 이벤트(입력되는 값이 변화될때마다 작동)를 사용해 각각 함수가 작동되게 했다. 

 

이름의 onChange에 할당된 함수를 보면 위와 같다. 입력받은 값 = event.target.value와 같고 setName를 사용해 name = 입력받은 값

으로 변화시킨다.

---

# 저장 버튼

 

저장 버튼을 누르면 onClick 이벤트를 통해 clickAddButton 함수가 실행된다. 

 

그럼 newOne이라는 객체를 새로 만들어서 id 값을 users.length + 1 즉, 원래 있던 users 배열 내의 길이에 1을 더해 id 값을 기존값에 + 1 한다. age와 name은 현재 입력된 값이 할당된다. 

 

그 후 스프레드 문법을 통해 users를 해체 시켜주고 새로 만든 newOne를 추가해 다시 배열로 감싸주면 기존 배열에 newOne이 추가된다. 이 방법을 통해 불변성을 지킨 것이라고 볼 수 있다. 

---

# 삭제 버튼

 

버튼을 누르면 onClick 이벤트를 통해 deleteBtn 함수가 작동하고, 이때 item.id를 매개변수로 deleteBtn 함수에 보내준다. 

그 이유는 고유명인 id를 deleteBtn 함수에 보내줘서 해당 카드만 지울 수 있게 하기 위함이다. 

 

filter() 함수를 썼는데 동작 원리를 설명해보면 버튼을 눌렀을 때 매개변수로 보내준 item.id(삭제 버튼을 누른 카드의 id)와 users의 모든 값을 순차적으로 a에 담아 a.id와 비교해서 id와 다른 값만 리턴한 것을 newUsers에 담아서 setUsers(newUsers)을 통해 값을 변화시켰다. 

 

---

# 컴포넌트 분리

 

저장 버튼 컴포넌트를 분리시켜보겠다. 먼저 <Button />형태로 컴포넌트를 호출해주고, clickAddButton 함수를 props로 보내준다.

 

Button.jsx 라는 파일을 components 폴더 내에 만들어서 해당 컴포넌트를 복사 붙여넣기 해줬다. 이때 주의해야 할점은 props로 받는  clickAddButton를 중괄호를 감싸서 받아야한다는 점이다. 

 

마찬가지로 웹페이지가 실행되고 자동으로 실행되는 해당 코드를 분리시켜봤다. <User /> 형태로 컴포넌트를 호출하고, props로 item, deleteBtn, key를 내려줬다. 

 

파일을 분리한 User.jsx에서 {item, deleteBtn}을 받고 나이와 이름을 출력해준다. 그 후 분리한 파일에서 위 코드의 마지막 줄과 같이 export default User를 해준다. 

 

메인 파일인 App.jsx에서도 export된 파일을 받아야 하므로 분리된 파일을 import 해준다.