[5주차] 리액트입문: 반복되는 컴포넌트 처리하기2

1편

[5주차] 리액트입문: component styling, 중복 컴포넌트 처리

component styling 인라인 return 안에 있는 각 태그들 속성으로 style={스타일이름} 으로 묶어 위에 쓴다. import logo from './logo.svg'; import './App.css'; function App() { const style = { display: "flex", alignItems: "center", just

whereannalee.tistory.com

반복되는 컴포넌트 처리하기 2

-객체로 이루어진 배열

import logo from './logo.svg';
import './App.css';

function App() {

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

  return (
    <div className="app-style">
      {
        users.map(function(item){
          return (<div className="component-style">
          {item.age} - {item.name}
        </div>)
        })
      }
    </div>
  );
}

export default App;

Warning 해결하기

위 코드에서 warning 이 뜬다.

뜻을 해석하자면 map 함수를 쓰려면, 항상 key라는 prop이 필요하다.

해결방법

반복되는 부분에 우리는 id를 붙여줘야 한다. 예를 들어 몇번째 <div> 인지 등을 파악하기 위하여.

<div className="component-style">
          {item.age} - {item.name}
\</div>

key={} 붙이기

import logo from './logo.svg';
import './App.css';

function App() {

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

  return (
    <div className="app-style">
      {
        users.map(function(item){
          return (
            <div key={item.id} className="component-style">
              {item.age} - {item.name}
            </div>)
        })
      }
    </div>
  );
}

export default App;

문제 해결!

+ 리스트를 추가 / 삭제 기능 만들기

const users ~ 를 state 로 바꿔주기

import logo from './logo.svg';
import './App.css';
import {useState} from "react";

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 = function(event){
    return setName(event.target.value);
  };
  const ageChangeHandler = function(event){
    return setAge(event.target.value);
  };

  // 추가버튼
  const clickAddButtonHandler = function(event) {
    // 1. 새로운 형태의 객체를 만든다 { id: 1, age: 30, name: "송중기"}
    const newUser = {
       id: users.length + 1,
       age: age,
       name: name,
      };
    // 2. 객체를 배열에 더한다
    setUsers([...users, newUser]);
  };

  // 삭제버튼
  const clickRemoveButtonHandler = function(id) {
    const remainedUsers = users.filter(function(user){
      return user.id !== id;
    });
    setUsers(remainedUsers);
  }


  return (
    <div>
      <div>
        이름 : &nbsp; <input value={name} onChange={nameChangeHandler}/><br />
        나이 :&nbsp; <input value={age} onChange={ageChangeHandler}/><br />
        <button onClick={clickAddButtonHandler}>추가</button>
      </div>
      <div className="app-style">
      {users.map(function(item){
          return (
            <div key={item.id} className="component-style">
              {item.age} - {item.name} <button onClick={()=> clickRemoveButtonHandler(item.id)}>X</button>
            </div>);
        })
      }
      </div>
    </div>

  );
}

export default App;

+ 컴포넌트 분리하기 (유저별로)

import logo from './logo.svg';
import './App.css';
import {useState} from "react";






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 = function(event){
    return setName(event.target.value);
  };
  const ageChangeHandler = function(event){
    return setAge(event.target.value);
  };

  // 추가버튼
  const clickAddButtonHandler = function(event) {
    // 1. 새로운 형태의 객체를 만든다 { id: 1, age: 30, name: "송중기"}
    const newUser = {
       id: users.length + 1,
       age: age,
       name: name,
      };
    // 2. 객체를 배열에 더한다
    setUsers([...users, newUser]);
  };

  // 삭제버튼
  const clickRemoveButtonHandler = function(id) {
    const remainedUsers = users.filter(function(user){
      return user.id !== id;
    });
    setUsers(remainedUsers);
  }


  return (
    <div>
      <div>
        이름 : &nbsp; <input value={name} onChange={nameChangeHandler}/><br />
        나이 :&nbsp; <input value={age} onChange={ageChangeHandler}/><br />
        <button onClick={clickAddButtonHandler}>추가</button>
      </div>
      <div className="app-style">
      {users.map(function(item){
          return <User key={item.id} item={item} removeFunction={clickRemoveButtonHandler}/>; //props로 부르기
        })
      }
      </div>
    </div>

  );
}






// App 의 자식 컴포넌트로
const User = function({item, removeFunction}) {
  return (<div key={item.id} className="component-style">
  {item.age} - {item.name} <button onClick={()=> removeFunction(item.id)}>X</button>
</div>);
}

export default App;

+ 컴포넌트 분리하기 (버튼별로)

props로 데이터 내려받기 버전

import logo from './logo.svg';
import './App.css';
import {useState} from "react";

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 = function(event){
    return setName(event.target.value);
  };
  const ageChangeHandler = function(event){
    return setAge(event.target.value);
  };

  // 추가버튼
  const clickAddButtonHandler = function(event) {
    // 1. 새로운 형태의 객체를 만든다 { id: 1, age: 30, name: "송중기"}
    const newUser = {
       id: users.length + 1,
       age: age,
       name: name,
      };
    // 2. 객체를 배열에 더한다
    setUsers([...users, newUser]);
  };

  // 삭제버튼
  const clickRemoveButtonHandler = function(id) {
    const remainedUsers = users.filter(function(user){
      return user.id !== id;
    });
    setUsers(remainedUsers);
  }


  return (
    <div>
      <div>
        이름 : &nbsp; <input value={name} onChange={nameChangeHandler}/><br />
        나이 :&nbsp; <input value={age} onChange={ageChangeHandler}/><br />
        <Button clickAddButtonHandler={clickAddButtonHandler}/>
      </div>
      <div className="app-style">
      {users.map(function(item){
          return <User key={item.id} item={item} removeFunction={clickRemoveButtonHandler}/>; //props로 부르기
        })
      }
      </div>
    </div>

  );
}

// App 의 자식 컴포넌트로
const User = function({item, removeFunction}) {
  return (<div key={item.id} className="component-style">
  {item.age} - {item.name} <button onClick={()=> removeFunction(item.id)}>X</button>
</div>);
}

// props를 가져올때 구조분해 할당으로 {} 중괄호 안에 넣어서 가져오기!
const Button = function({clickAddButtonHandler}) {
  return (<button onClick={clickAddButtonHandler}>추가</button>);
}

export default App;

childeren 으로 데이터 내려받기 버전

import logo from './logo.svg';
import './App.css';
import {useState} from "react";

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 = function(event){
    return setName(event.target.value);
  };
  const ageChangeHandler = function(event){
    return setAge(event.target.value);
  };

  // 추가버튼
  const clickAddButtonHandler = function(event) {
    // 1. 새로운 형태의 객체를 만든다 { id: 1, age: 30, name: "송중기"}
    const newUser = {
       id: users.length + 1,
       age: age,
       name: name,
      };
    // 2. 객체를 배열에 더한다
    setUsers([...users, newUser]);
  };

  // 삭제버튼
  const clickRemoveButtonHandler = function(id) {
    const remainedUsers = users.filter(function(user){
      return user.id !== id;
    });
    setUsers(remainedUsers);
  }


  return (
    <div>
      <div>
        이름 : &nbsp; <input value={name} onChange={nameChangeHandler}/><br />
        나이 :&nbsp; <input value={age} onChange={ageChangeHandler}/><br />
        <Button clickAddButtonHandler={clickAddButtonHandler}>추가</Button>
      </div>
      <div className="app-style">
      {users.map(function(item){
          return <User key={item.id} item={item} removeFunction={clickRemoveButtonHandler}/>; //props로 부르기
        })
      }
      </div>
    </div>

  );
}

// App 의 자식 컴포넌트로
const User = function({item, removeFunction}) {
  return (<div key={item.id} className="component-style">
  {item.age} - {item.name} <button onClick={()=> removeFunction(item.id)}>X</button>
</div>);
}

// props를 가져올때 구조분해 할당으로 {} 중괄호 안에 넣어서 가져오기!
const Button = function({clickAddButtonHandler, children}) {
  return (<button onClick={clickAddButtonHandler}>{children}</button>);
}

export default App;

+ 컴포넌트 파일로 나눠 분리하기

App.jsx

import logo from './logo.svg';
import './App.css';
import {useState} from "react";
import Button from "./components/Button";
import User from "./components/User";

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 = function(event){
    return setName(event.target.value);
  };
  const ageChangeHandler = function(event){
    return setAge(event.target.value);
  };

  // 추가버튼
  const clickAddButtonHandler = function(event) {
    // 1. 새로운 형태의 객체를 만든다 { id: 1, age: 30, name: "송중기"}
    const newUser = {
       id: users.length + 1,
       age: age,
       name: name,
      };
    // 2. 객체를 배열에 더한다
    setUsers([...users, newUser]);
  };

  // 삭제버튼
  const clickRemoveButtonHandler = function(id) {
    const remainedUsers = users.filter(function(user){
      return user.id !== id;
    });
    setUsers(remainedUsers);
  }


  return (
    <div>
      <div>
        이름 : &nbsp; <input value={name} onChange={nameChangeHandler}/><br />
        나이 :&nbsp; <input value={age} onChange={ageChangeHandler}/><br />
        <Button clickAddButtonHandler={clickAddButtonHandler}>추가</Button>
      </div>
      <div className="app-style">
      {users.map(function(item){
          return <User key={item.id} item={item} removeFunction={clickRemoveButtonHandler}/>; //props로 부르기
        })
      }
      </div>
    </div>

  );
}

// User 컴포넌트는 Import 하여 가져옴

// Button 컴포넌트는 import 하여 가져옴

export default App;

Button.jsx


const Button = function({clickAddButtonHandler, children}) {
  return (<button onClick={clickAddButtonHandler}>{children}</button>);
}

export default Button;

User.jsx

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


export default User;

728x90

'부트캠프 개발일지 2023-2024 > React 리액트' 카테고리의 다른 글

[6주차] 리액트숙련: GlobalStyles, Sass, css reset (0)	2023.11.08
[6주차] 리액트숙련: Styled Components (0)	2023.11.08
[5주차] 리액트입문: component styling, 중복 컴포넌트 처리 (0)	2023.11.02
[5주차] 리액트입문: 팀협업 시, 리액트파일 압축해서 보낼 때 (0)	2023.11.02
[5주차] 리액트입문: 카운터 앱 만들기 (0)	2023.11.02

Whereanna 🐈‍⬛

[5주차] 리액트입문: 반복되는 컴포넌트 처리하기2

반복되는 컴포넌트 처리하기 2

-객체로 이루어진 배열

Warning 해결하기

+ 리스트를 추가 / 삭제 기능 만들기

+ 컴포넌트 분리하기 (유저별로)

+ 컴포넌트 분리하기 (버튼별로)

+ 컴포넌트 파일로 나눠 분리하기

'부트캠프 개발일지 2023-2024 > React 리액트' 카테고리의 다른 글

티스토리툴바

[5주차] 리액트입문: 반복되는 컴포넌트 처리하기2

반복되는 컴포넌트 처리하기 2

-객체로 이루어진 배열

Warning 해결하기

+ 리스트를 추가 / 삭제 기능 만들기

+ 컴포넌트 분리하기 (유저별로)

+ 컴포넌트 분리하기 (버튼별로)

+ 컴포넌트 파일로 나눠 분리하기

'부트캠프 개발일지 2023-2024 > React 리액트' 카테고리의 다른 글

관련글

티스토리툴바