React입문 1주차(반복컴포넌트02)

🔴컴포넌트 분리(같은 파일내에서)

🔴컴포넌트 분리(파일 분리로)

---

삭제기능 분리

import React, { useState } from "react"; // useState를 import해주는 것 확인
import './App.css';

const 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: "구교환" },
  ]);


  // 아래 return에서 받아 오는, input안에 입력되는 값들이 바로바로 셋팅되는 것
  // 이름
  const [name, setName] = useState(''); // 이름이니까 

  // 나이
  const [age, setAge] = useState(''); // 나이니까

  // 이름과 나이 handler
  const nameChangeHandler = (event) => {
    setName(event.target.value)
  }
  const ageChangeHandler = function (event) {
    setAge(event.target.value)
  }

  // 추가 
  const clickAddBtnHandler = function (event) {

    const newUser = {
      id: users.length + 1,  // users에서 id는 번호에 불과하니 길이로써 +1해준다.
      age: age,             // 받아오는게 age, name이니까 value에 그대로 적는다.
      name,           // 이렇게 key-value가 같은 경우 생략 가능하다.
    }

    // 원래있던 users배열을 spread operater을 이용해서 풀고, 
    // 입력된 배열(의 변수)를 추가
    // ✨불변성 유지
    setUsers([...users, newUser]);
  }

  // 삭제
  const clickRemoveBtnHandler = (id) => {
    // const newUsers = users.filter(user => user.ld !== id);
    const newUsers = users.filter(function (user) {
      return user.id !== id;
    })
    setUsers(newUsers);
  }



  return (
    <div>

      <div>
        이름 :&nbsp; <input
          value={name}
          // 같음
          onChange={(event) => nameChangeHandler(event)} />
        <br />

        나이 :&nbsp; <input
          value={age}
          // 같음 event만 쓸꺼면 이렇게 해도 됨
          onChange={ageChangeHandler} />
      </div>
      <br />

      <button onClick={clickAddBtnHandler}>추가!</button>

      <div className="app-style">
        {users.map(function (a) {
          return (
            // App컴포넌트가 가지고 있는 a값을 하위 컴포넌트인 User로 전달, 내려줌
            <User key={a.id} a={a} removeFunction={clickRemoveBtnHandler} />
          )
        })}
      </div>

    </div>
  );
};

const User = ({ a, removeFunction }) => {

  return (
    <div key={a.id} className="component-style ">{a.age} - {a.name}
      <button onClick={() => removeFunction(a.id)}>X</button>
    </div>
  )
}

export default App;

---

추가버튼 분리

import React, { useState } from "react"; // useState를 import해주는 것 확인
import './App.css';

const 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: "구교환" },
  ]);


  // 아래 return에서 받아 오는, input안에 입력되는 값들이 바로바로 셋팅되는 것
  // 이름
  const [name, setName] = useState(''); // 이름이니까 

  // 나이
  const [age, setAge] = useState(''); // 나이니까

  // 이름과 나이 handler
  const nameChangeHandler = (event) => {
    setName(event.target.value)
  }
  const ageChangeHandler = function (event) {
    setAge(event.target.value)
  }

  // 추가 
  const clickAddBtnHandler = function (event) {

    const newUser = {
      id: users.length + 1,  // users에서 id는 번호에 불과하니 길이로써 +1해준다.
      age: age,             // 받아오는게 age, name이니까 value에 그대로 적는다.
      name,           // 이렇게 key-value가 같은 경우 생략 가능하다.
    }

    // 원래있던 users배열을 spread operater을 이용해서 풀고, 
    // 입력된 배열(의 변수)를 추가
    // ✨불변성 유지
    setUsers([...users, newUser]);
  }

  // 삭제
  const clickRemoveBtnHandler = (id) => {
    // const newUsers = users.filter(user => user.ld !== id);
    const newUsers = users.filter(function (user) {
      return user.id !== id;
    })
    setUsers(newUsers);
  }



  return (
    <div>

      <div>
        이름 :&nbsp; <input
          value={name}
          // 같음
          onChange={(event) => nameChangeHandler(event)} />
        <br />

        나이 :&nbsp; <input
          value={age}
          // 같음 event만 쓸꺼면 이렇게 해도 됨
          onChange={ageChangeHandler} />
      </div>
      <br />

      <Button clickAddBtnHandler={clickAddBtnHandler}/>

      <div className="app-style">
        {users.map(function (a) {
          return (
            // App컴포넌트가 가지고 있는 a값을 하위 컴포넌트인 User로 전달, 내려줌
            <User key={a.id} a={a} removeFunction={clickRemoveBtnHandler} />
          )
        })}
      </div>

    </div>
  );
};

const Button = ({clickAddBtnHandler}) => {
  return <button onClick={clickAddBtnHandler}>추가!</button>
}

const User = ({ a, removeFunction }) => {

  return (
    <div key={a.id} className="component-style ">{a.age} - {a.name}
      <button onClick={() => removeFunction(a.id)}>X</button>
    </div>
  )
}

export default App;

---

컴포넌트 파일 분리(한 파일에 있으면 관리하기 어려움)

src안에 component로 폴더를 하나 생성하고 그 안에 만든 컴포넌트의 이름으로 파일을 만들어 준다.

 

그 각각의 컴포넌트 안에 해당 컴포넌트의 내용을 넣어주고, export까지 해주고

// ./src/Button.jsx
const Button = ({ clickAddBtnHandler }) => {
    return <button onClick={clickAddBtnHandler}>추가!</button>
}

export default Button;

// ./src/User.jsx
const User = ({ a, removeFunction }) => {

    return (
        <div key={a.id} className="component-style ">{a.age} - {a.name}
            <button onClick={() => removeFunction(a.id)}>X</button>
        </div>
    )
}

export default User;

---

전체를 관리하는 App.js(App.jsx)파일에 분리한 컴포넌트 부분 지워주고 파일을 import해주면 된다.

import React, { useState } from "react"; // useState를 import해주는 것 확인
import './App.css';
import Button from "./component/Button";
import User from "./component/User";

const 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: "구교환" },
  ]);


  // 아래 return에서 받아 오는, input안에 입력되는 값들이 바로바로 셋팅되는 것
  // 이름
  const [name, setName] = useState(''); // 이름이니까 

  // 나이
  const [age, setAge] = useState(''); // 나이니까

  // 이름과 나이 handler
  const nameChangeHandler = (event) => {
    setName(event.target.value)
  }
  const ageChangeHandler = function (event) {
    setAge(event.target.value)
  }

  // 추가 
  const clickAddBtnHandler = function (event) {

    const newUser = {
      id: users.length + 1,  // users에서 id는 번호에 불과하니 길이로써 +1해준다.
      age: age,             // 받아오는게 age, name이니까 value에 그대로 적는다.
      name,           // 이렇게 key-value가 같은 경우 생략 가능하다.
    }

    // 원래있던 users배열을 spread operater을 이용해서 풀고, 
    // 입력된 배열(의 변수)를 추가
    // ✨불변성 유지
    setUsers([...users, newUser]);
  }

  // 삭제
  const clickRemoveBtnHandler = (id) => {
    // const newUsers = users.filter(user => user.ld !== id);
    const newUsers = users.filter(function (user) {
      return user.id !== id;
    })
    setUsers(newUsers);
  }

  return (
    <div>

      <div>
        이름 :&nbsp; <input
          value={name}
          // 같음
          onChange={(event) => nameChangeHandler(event)} />
        <br />

        나이 :&nbsp; <input
          value={age}
          // 같음 event만 쓸꺼면 이렇게 해도 됨
          onChange={ageChangeHandler} />
      </div>
      <br />

      <Button clickAddBtnHandler={clickAddBtnHandler} />

      <div className="app-style">
        {users.map(function (a) {
          return (
            // App컴포넌트가 가지고 있는 a값을 하위 컴포넌트인 User로 전달, 내려줌
            <User key={a.id} a={a} removeFunction={clickRemoveBtnHandler} />
          )
        })}
      </div>

    </div>
  );
};

export default App;