리엑트 - 컴포넌트 나눠보기

이전의 내용에서 컴포넌트만 나눠보기

전체코드

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

const App = () => {


  const [users, setUsers] = useState([
    { id: 1, name: "장원영", age: 20 },
    { id: 2, name: "윈터", age: 21 },
    { id: 3, name: "김채원", age: 22 },
    { id: 4, name: "로제", age: 23 },
    { id: 5, name: "하니", age: 24 },
  ])

  const [newName, setNewName] = useState('');
  const [newAge, setNewAge] = useState('');

  const oncChangeAge = (event) => {
    setNewAge(event.target.value);
  }

  // 추가하기 버튼을 클릭했을 때 실행되는 함수
  const clickAddButtonHandler = () => {
    const newUser = {
      id: users.length+1,
      name: newName,
      age: newAge
    }
    setUsers([...users, newUser]);
    
    alert("추가 버튼이 클릭되었습니다.")
  }

  // 삭제하기 버튼을 클릭했을 때 실행되는 함수
  // const clickDeleteButtonHandler = (id) => {
  //   alert('아이디를 삭제합니다')
  //   const newUsers = users.filter((item)=>{
  //     return item.id !== id;
  //   })
  //   setUsers(newUsers);
  // }

  // 삭제하기 버튼 - splice 사용
  const clickDeleteButtonHandler = (id) => {
    alert('아이디를 삭제합니다');
    const indexToDelete = users.findIndex((user) => user.id === id);
    const newUsers = [...users];
    newUsers.splice(indexToDelete, 1);
    setUsers(newUsers);
  };


  return (
    <div>
    <div>
      <br />
      <div>
        이름:&nbsp; 
      <input
      value={newName}
      onChange= {
        (event)=>{
          setNewName(event.target.value);
        }
      }
      />
      </div>
      <br />
      <br />

      <div> 나이:&nbsp;
      <input
      value = {newAge}
      onChange = {oncChangeAge}
      ></input>
      <br /><br />

      <button
      onClick={clickAddButtonHandler}
      >
        추가버튼
      </button>
      </div>
    </div>
    <div className="app-style">
      {users.map((item)=>{
        return(
        <User key = {item.id} item={item} removeFunction={clickDeleteButtonHandler} />
        )
      })}

    </div>
    </div>
  );
};

const User = ({item,removeFunction}) => {
  return (
    <div>
        <div key = {item.id} className="component-style">
            {item.name} - {item.age}
            <button
            onClick={()=>removeFunction(item.id)}
            >삭제</button>
          </div>
    </div>
  )
}

export default App;

설명

기존에 사용하던 부분에서 자주 사용될 것 같은 코드를 컴포넌트 단위로 나눠놓은 과정입니다.

전체코드에서 변경된부분은 App 컴포넌의 return 부분부터 참고하면 되겠습니다.

<div className="app-style">
      {users.map((item)=>{
        return(
        <User key = {item.id} item={item} removeFunction={clickDeleteButtonHandler} />
        )
      })}

    </div>
    </div>
  );
};

const User = ({item,removeFunction}) => {
  return (
    <div>
        <div key = {item.id} className="component-style">
            {item.name} - {item.age}
            <button
            onClick={()=>removeFunction(item.id)}
            >삭제</button>
          </div>
    </div>
  )
}

export default App;

1.app-style 하단 부분의 return 부분의 있던 <div> 부분을 따로 복사해둡니다.

2. User 라는 새로운 컴포넌트를 만들어 자식컴포넌트로 사용할 것이며 아까 복사해둔 내용을 여기에 붙여넣기 해줍니다.

3. 그리고 기존 부모컴포넌트인 App 컴포넌트에서는 해당되는 내용의 참조를 User 컴포넌트로 변경할 것이기 때문에 <User> 로 변경해주고 차근차근 props 를 설정해줍니다.

4. User 컴포넌트에서 필요한 파라미터 값들은 key값, item 정보, 삭제시 실행되야될 함수의 내용 등 크게는 3가지가 필요합니다.
   그래서 <User> 의 안에 props 값으로 key값, item 과 삭제함수의 이름을 지정해주고 전달해줍니다.

5. 그리고 전달받은 props 값이 잘 되는지 확인하면 완료입니다.