캠프 Ch5. TIL | 1월 7일

import react from 'react'

const App = () => {
  const style = {
    display: "flex",
    gap: "12px",
    padding: "50px",
  }
 
  const users = [
    {
      id: 1,
      age: 30,
      name: "송중기"
    },
    {
      id: 2,
      age: 24,
      name: "송강"
    },
    {
      id: 3,
      age: 28,
      name: "이보라"
    },
    {
      id: 4,
      age: 22,
      name: "김지수"
    },
  ];

  return (
    <div style={style}>
      {users.map(function(user) {
       return (
        <User key={user.id} user={user}/>
      );
    })}
  </div>
 );
};

export default App;

const User =({user}) => {
  const squareStyle = 
    {
      width: "100px",
      height: "100px",
      border: "1px solid green",
      borderRadius: "10px",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
    };

  return (
  <div style={squareStyle}>
    {user.age}살 - {user.name}
  </div>
  );
};

부모가 가지고있는 props 객체를 자식으로 전달하고 자식이 전달 받아 자식만의 UI를 만들었다. 

근데 막상 코드를 보면 헷갈림. react의 process가 아니 컴퓨터의 언어가 어렵다.

 

하나씩 뜯어보자!

 

1. App Component

const App = () => {
  const myUsers = [
    { id: 1, age: 30, name: "송중기" },
    { id: 2, age: 24, name: "송강" },
    { id: 3, age: 28, name: "이보라" },
    { id: 4, age: 22, name: "김지수" },
  ];

  return (
    <div>
      {myUsers.map(function(users) {
        return (
          <User key={users.id} user={users}/>
        );
      })}
    </div>
  );
};

myUsers

- myUsers는 사용자 객체들의 배열

- 배열의 각 객체는 id, age, name 속성을 가지고 있다.

 

myUsers.map(function(users) {...})
- map 메서드는 myUsers 배열을 순회하며 각 사용자 객체(users)를 처리한다.

- map 의 콜백 함수가 실행될 때:

  - users는 배열의 현재 요소.

  - 콜백 함수는 <User /> 컴포넌트를 반환

  - 반환된 <User /> 컴포넌트들은 배열 형태로 렌더링.

 

User key={users.id} user={users} />

 - <User />는 User 컴포넌트를 호출하는 JSX 태그

 - key : React에서 고유 키값으로 사용

 - user : 현재 사용자 객체(users)를 User 컴포넌트에 전달!!

 

2. User 컴포넌트

const User = ({ user }) => {
  return (
    <div>
      {user.age}살 - {user.name}
    </div>
  );
};

 

({ user })

- 구조 분해 할당 

 App에서 <User user={users} />로 전달된 props에서 user 속성을 바로 추출.

 

return (...)

- JSX를 반환하여 컴포넌트의 UI를 정의

 

{user.age)살 - {user.name}

- JSX 안에서 사용자의 나이와 이름을 출력

 

3. 전체 동작 흐름

 1. App 컴포넌트에서 myUsers 배열이 정의

 2. myUser.map() 메서드를 사용해 배열의 각 요소(users)에 대해 <User /> 컴포넌트를 생성

3. 각 사용자 개체는 user prop으로 전달되어 User 컴포넌트에서 사용!!

4. User 컴포넌트는 사용자 정보를 표시하는 JSX를 반환

5. 결과적으로 모든 사용자 정보가 렌더링 

 

 

 

새로 추가하는 기능

  const [age,setAge] = useState(0);
   const [name, setName] = useState("");

  return (
  <>
    <input 
      type="number" 
      value={age} 
      onChange={(event)=>{
        setAge(event.target.value);
      }}
    />

    <input 
      type="text" 
      value={name} 
      onChange={(event)=> {
        setName(event.target.value);
      }} 
    />
    <button onClick={()=>{
      // console.log("age=>", age)
      // console.log("name=>", name);
      const newUser ={
        id: new Date().getTime(),
        age: age,
        name: name
      };

      setUsers([...users, newUser]);

    }}>추가</button>

 

 

데이터를 삭제하는 기능

const deleteUserHandler = (id) => {

       const deletedUsers = users.filter(function(user) {
        return user.id !=id
       });

       setUsers (deletedUsers);
    };

<div style={style}>
      {users.map(function(users) {
       return (
        <User
          key={users.id}
          user={users}
          deleteUserHandler={deleteUserHandler}
          />
         );
      })}
    </div>

const User =({user,deleteUserHandler}) => {
  const squareStyle = 
    { width: "100px",
      height: "100px",
      border: "1px solid green",
      borderRadius: "10px",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      flexDirection: "column",
    };

  const { age, name, id} =  user;

  return (
  <div style={squareStyle}>
    <div>
    {age}살 - {name}
    </div>
    <div>
      <button onClick={()=> deleteUserHandler(id)}>삭제</button>
    </div>
  </div>
  );
};