캠프 Ch5. TIL | 1월 8일 useState 이해하기

import { useState } from "react";

// App 컴포넌트
const App = () => {
  // 스타일 할당
  const style = {
    display: "flex",
    gap: "12px",
    padding: "50px",
  }
  // useState 선언 
  // user : 사용자 정보를 저장하는 !!배열!!
  // 출력했을 때 사용자 정보를 추가하거나 삭제하기 위해 필요!!
  const [users, setUsers] = useState([
  // {객체}
    {
      id: new Date().getTime(),
      age: 30,
      name: "송중기"
    },
    {
      id: new Date().getTime() + 1,
      age: 24,
      name: "송강"
    },
   ]
  );

  // 입력된 나이와 이름을 저장하는 상태변수
  // 인풋텍스트에서 사용자가 입력함에 따라 변하기 때문에 필요!!
  // 초기값은 입력 전 0과 빈 문자열
  // setName과 setAge는 사용자 입력값에 따라 상태를 업데이트하는 함수
  // return 문에서 <input> 요소 쓸 때 호출됨
  const [age, setAge] = useState(0);
  const [name, setName] = useState("");

  // 유저를 추가시키는 함수
  const addUserHandler = () => {
    const newUser = {
      id: new Date().getTime(),
      age: Number(age),
      name: name
    };

    setUsers([...users, newUser]);
  }
  
  // 유저를 삭제하는 함수
  // (id)는 deleteUserHandler 함수의 매개변수로, 삭제하려는 특정 사용자의 id를 전달받기 위해 사용!!
  // 호출 시, 부모 컴포넌트에서 전달한 사용자 id가 이 매개변수에 들어옴.
  const deleteUserHandler = (id) => {

    // filter는 배열의 각 요소를 순회하며 조건이 true인 요소만 새로운 배열에 포함
    const deletedUsers = users.filter(function (user) {
     // user의 id가 삭제할 id와 같지 않은 경우 (true), 해당 요소는 deletedUsers에 포함
     // 같으면 (false), 해당 요소는 제외.
     return user.id != id
    });

    setUsers(deletedUsers);
  };


  return (
    <>
      <input
        type="number"
        //입력하는 값의 속성
        value={age}
        onChange={(event) => {
          setAge(event.target.value);
        }}
      />

      <input
        type="text"
        value={name}
        onChange={(event) => {
          setName(event.target.value);
        }}
      />
      <Button color="green" onClick={addUserHandler}
      >추가</Button>

      <div style={style}>
        {users.filter(function (u) {
          return u.age < 25
        }).map(function (users) {
          return (
           // 자식 컴포넌트에게 props 전달!!
           <User
              key={users.id}
              user={users}
              deleteUserHandler={deleteUserHandler}
            />
          );
        })}
      </div>
    </>
  );
};

export default App;

// User 컴포넌트
// 자식 컴포넌트 부모로부터 받은 props 입력 (구조 할당 배분)
const User = ({ user, deleteUserHandler }) => {
  const squareStyle =
  {
    width: "100px",
    height: "100px",
    border: "1px solid green",
    borderRadius: "10px",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "column",
  };

  // 구조 분해 할당을 사용해 객체 user에서 agem name, id 속성을 추출하여 각각의 변수로 선언!!
  const { age, name, id } = user;

  return (

    <div style={squareStyle}>
      <div>
        {age}살 - {name}
      </div>
      <div>
        <Button
          color="red"
          // 버튼을 클릭하면 deleteUserHandler 함수가 호출되며
          // 이때, 클릭된 사용자(user)의 id를 deleteUserHandler에 전달!!!!
          onClick={() => deleteUserHandler(id)}>삭제</Button>
      </div>
    </div>
  );
};


// 여기서 children은 부모 컴포넌트가 자식 텀포넌트 태그 사이에 포함한 내용
const Button = ({ children, onClick, color }) => {

  if (color) {
    return (

      <button
        style={{
          backgroundColor: color,
          color: "white",
        }}
        onClick={onClick}>{children}</button>
    );
  }
  return <button onClick={onClick}>{children}</button>
}

 

 

useState

이해하기 위해 내가 만들어본 코드

import { useState } from 'react'


const App = () => {
  const [text,setText] = useState ("안녕하세요!");

  const style = {
    display : "flex",
    gap : "12px",
    alignItems : "center",
    justifyContent : "center",
  }
  
  const updateText = () => {
    setText("업데이트됨");
  };
  
  const cancleText = () => {
    setText("취소됨");
  };

  const laterText = () => {
    setText("나중에 알림 드릴게요!");
  };
  

  return (
    <>
     <p>{text}</p>
     <div style = {style}>
      <button onClick = {updateText}>업데이트</button>
      <button onClick = {cancleText}>취소</button>
      <button onClick = {laterText}>나중에알림</button>
     </div>
    </>
  )
}

export default App