본문 바로가기
JavaScript/React

반복되는 Component 처리하기

팽투더이 2023. 6. 7. 20:48
728x90

반복되는 Component 처리하기

컴포넌트 중복 map함수로 빼기

 

map 함수란?

원래 데이터를 가공하여 출력하는 방법

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

function App() {
  const testArr = ['감자', '고구마', '오이', '가지', '옥수수'];
  return (
    <div className='app-style'>
      {
        testArr.map(function(item) {
          return <div className='component-style'>{item}</div>
        })
      }
    </div>
  );
}

export default App;

filer 함수

testArr = [1, 2, 3]

testArr.filter((item) => {
	return item > 3
})

// [1, 2]

 

App.js

import React from 'react';
import './App.css';

function App() {
  const testArr = ['감자', '고구마', '오이', '가지', '옥수수'];
  return (
    <div className='app-style'>
      {
        testArr
        .filter((item) => {
          return item !== '오이'
        })
        .map((item) => {
          return <div className='component-style'>{item}</div>;
        })
      }
    </div>
  );
};

export default App;

filter 반환 값 역시 array임!

 

에러 발생!

map 함수를 쓸 때, 반복적으로 return하는 부분들은 반드시 tag를 붙여줘야 함.

 

App.js

import React from 'react';
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((item) => {
          return <div key={item.id} className='component-style'>{item.age} - {item.name}</div>
        })
      }
    </div>
  )
};

export default App;

삭제하고 수정하려고 하면 rendering을 다시 되야 한다. 그래서 이 값들을 state로 해야 한다. 

 

value - onChange 짝꿍!

 

Add User

 

App.js

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

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

  const clickAddButtonHandler = () => {
    // 1. 새로운 형태의 user객체를 만든다
    // 2. 배열에 더한다.

    const newUser = {
      id : users.length + 1,
      age, // key - value 동일하면 생략 가능
      name,
    }

    // 원래 있던 users 배열을 풀고 값넣어주기(불변성을 유지하기 위해)
    setUsers([...users, newUser]);
  }

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

  )
};

export default App;

 

Delete User

 

App.js

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

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

  // 추가 버튼
  const clickAddButtonHandler = () => {
    const newUser = {
      id : users.length + 1,
      age, // key - value 동일하면 생략 가능
      name,
    };

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

  // 삭제 버튼
  const clickRemoveButtonHandler = (id) => {
    // users.filter(user => user.id !== 어떤 값)
    const newUsers = users.filter((user) =>  user.id !== id);
    setUsers(newUsers);
  }

  return (
    <div>
      <div>
        이름 :&nbsp; 
        <input value={name} onChange={(event) => nameChangeHandler(event)}/>
        {name}
        <br />
        나이 :&nbsp; 
        <input value={age} onChange={(event) => ageChangeHandler(event)} />
        {age}
        <br />
        <button onClick={clickAddButtonHandler}>추가</button>
      </div>
      <div className='app-style'>
      {
        users.map((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;

filter 사용해서 삭제된 값외의 값들을 가져오면 되지 않을까?

 

pros로 분리

App.js

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

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

  // 추가 버튼
  const clickAddButtonHandler = () => {
    const newUser = {
      id : users.length + 1,
      age, // key - value 동일하면 생략 가능
      name,
    };

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

  // 삭제 버튼
  const clickRemoveButtonHandler = (id) => {
    // users.filter(user => user.id !== 어떤 값)
    const newUsers = users.filter((user) =>  user.id !== id);
    setUsers(newUsers);
  }
  

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

  )
};

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

export default App;

컴포넌트 분리하기

 

App.js

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

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

  // 추가 버튼
  const clickAddButtonHandler = () => {
    const newUser = {
      id : users.length + 1,
      age, // key - value 동일하면 생략 가능
      name,
    };

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

  // 삭제 버튼
  const clickRemoveButtonHandler = (id) => {
    // users.filter(user => user.id !== 어떤 값)
    const newUsers = users.filter((user) =>  user.id !== id);
    setUsers(newUsers);
  }
  

  return (
    <div>
      <div>
        이름 :&nbsp; 
        <input value={name} onChange={(event) => nameChangeHandler(event)}/>
        {name}
        <br />
        나이 :&nbsp; 
        <input value={age} onChange={(event) => ageChangeHandler(event)} />
        {age}
        <br />
        <Button clickAddButtonHandler={clickAddButtonHandler}>추가test</Button>
      </div>
      <div className='app-style'>
      {
        users.map((item) => {
          return (
            <User
              key={item.id} 
              item={item} 
              clickRemoveButtonHandler={clickRemoveButtonHandler} 
            />
          )
        })
      }
      </div>
    </div>

  )
};

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

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

export default App;

{/* <div className='component-style'>{users[0].age} - {users[0].name}</div> */}

main, Button, User 컴포넌트 총 3개.

App.jsx

import React, { useState } from 'react';
import './App.css';
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 = (event) => {
    setName(event.target.value);
  }
  
  const ageChangeHandler = (event) => {
    setAge(event.target.value);
  }

  // 추가 버튼
  const clickAddButtonHandler = () => {
    const newUser = {
      id : users.length + 1,
      age, // key - value 동일하면 생략 가능
      name,
    };

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

  // 삭제 버튼
  const clickRemoveButtonHandler = (id) => {
    // users.filter(user => user.id !== 어떤 값)
    const newUsers = users.filter((user) =>  user.id !== id);
    setUsers(newUsers);
  }
  

  return (
    <div>
      <div>
        이름 :&nbsp; 
        <input value={name} onChange={(event) => nameChangeHandler(event)}/>
        <br />
        나이 :&nbsp; 
        <input value={age} onChange={(event) => ageChangeHandler(event)} />
        <br />
        <Button clickAddButtonHandler={clickAddButtonHandler}>추가test</Button>
      </div>
      <div className='app-style'>
      {
        users.map((item) => {
          return (
            <User
              key={item.id} 
              item={item} 
              clickRemoveButtonHandler={clickRemoveButtonHandler} 
            />
          )
        })
      }
      </div>
    </div>

  )
};

export default App;

 

src/components/Button.jsx

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

export default Button;

 

 

src/components/User.jsx

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

export default User;
저작자표시

'JavaScript > React' 카테고리의 다른 글

숙련주차, GlobalStyles, Sass  (0) 2023.06.07
숙련주차, Styled Components ,Css-in-JS  (0) 2023.06.07
Styling  (0) 2023.06.07
실습 - 카운트 앱  (0) 2023.06.07
Component & Rendering  (0) 2023.06.07

'JavaScript/React' Related Articles

티스토리툴바