[ 배열 추가 방법 ]
이번에는 배열에 새로운 항목을 추가하는 방법을 알아보겠습니다.
우선 배열에 항목을 추가하기 위해 CreateUser.js라는 컴포넌트를 작성해야한다
CreateUser.js
import React from 'react';
function CreateUser({username, email, onChange, onCreate}) {
return (
<div>
<input name="username" placeholder="계정명" onChange={onChange} value={username} />
<input name="email" placeholder="이메일" onChange={onChange} value={email} />
<button onClick={onCreate}>등록</button>
</div>
)l
}
export default CreateUser;
JavaScript
복사
이번 컴포넌트에서는 상태관리를 CreateUser 에서 하지 않고 부모 컴포넌트인 App 에서 하게 하고, input 의 값 및 이벤트로 등록할 함수들을 props 로 넘겨받아서 사용
App.js
이 컴포넌트를 App 에서 UserList 위에 렌더링해보세요.
import React, { useRef } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';
function App() {
const [ Inputs, setInputs ] = useState(
{ username : '',
email : '', ) };
const { username, email } = Inputs;
const onChange = e = > {
const [name , value } = e.target;
setInputs({
...Inputs,
[name] : value
)};
};
const [users, setUsers] = useState([
{
id: 1,
username: 'velopert',
email: 'public.velopert@gmail.com'
},
{
id: 2,
username: 'tester',
email: 'tester@example.com'
},
{
id: 3,
username: 'liz',
email: 'liz@example.com'
}
]);
const nextId = useRef(4);
const onCreate = () => {
const user = {
id : nextId.current,
username ,
email };
setUsers[...users, user]);
setInputs({
username : '',
email : ''
});
nextId.current += 1;
};
return (
<>
<CreateUser
username={username}
email={email}
onChange={onChange}
onCreate={onCreate}
/>
<UserList users={users} />
</>
);
}
export default App;
JavaScript
복사
