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>
이름 :
<input value={name} onChange={(event) => nameChangeHandler(event)}/>
{name}
<br />
나이 :
<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>
이름 :
<input value={name} onChange={(event) => nameChangeHandler(event)}/>
{name}
<br />
나이 :
<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>
이름 :
<input value={name} onChange={(event) => nameChangeHandler(event)}/>
{name}
<br />
나이 :
<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>
이름 :
<input value={name} onChange={(event) => nameChangeHandler(event)}/>
{name}
<br />
나이 :
<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>
이름 :
<input value={name} onChange={(event) => nameChangeHandler(event)}/>
<br />
나이 :
<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 |