※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.
배열에 항목 추가 하기
우선 input 두개와 button 하나로 이루어진 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> ); } export default CreateUser;
이번 컴포넌트에서는 상태관리를 CreateUser 에서 하지 않고 부모 컴포넌트인 App 에서 하게 하고 input 의 값 및 이벤트로 등록할 함수들을 props 로 넘겨받아서 사용해주겠다.
App.js
import React, { useRef } from 'react'; import UserList from './UserList'; import CreateUser from './CreateUser'; function App() { const users = [ { id: 1, username: 'programexplorer', email: 'programexplorer'@naver.com' }, { id: 2, username: 'tester', email: 'tester@gmail.com' }, { id: 3, username: 'liz', email: 'liz@daum.net' } ]; const nextId = useRef(4); const onCreate = () => { // 나중에 구현할 배열에 항목 추가하는 로직 // ... nextId.current += 1; }; return ( <> <CreateUser /> <UserList users={users} /> </> ); } export default App;
위에서 만든 CreateUser 컴포넌트를 App.js에서 UserList 컴포넌트 위에 렌더링 한다.
실행 결과

App.js
CreateUser 컴포넌트에게 필요한 props 를 App 에서 준비한다.
import React, { useRef, useState } 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: 'programexplorer', email: 'programexplorer@naver.com' }, { id: 2, username: 'tester', email: 'tester@gmail.com' }, { id: 3, username: 'liz', email: 'liz@daum.net' } ]); const nextId = useRef(4); const onCreate = () => { // 나중에 구현 할 배열에 항목 추가하는 로직 // ... setInputs({ username: '', email: '' }); nextId.current += 1; }; return ( <> <CreateUser username={username} email={email} onChange={onChange} onCreate={onCreate} /> <UserList users={users} /> </> ); } export default App;
위 코드처럼 작성 후 input 에 값을 입력하고, 등록 버튼을 눌렀을 때 input 값들이 잘 초기화되는지 확인해 본다.
이제 마지막으로 배열에 변화를 준다.
배열에 변화를 줄 때에는 객체와 마찬가지로 불변성을 지켜주어야 한다. 그렇기 때문에 배열의 push, splice, sort 등의 함수를 사용하면 안된다. 만약에 사용해야 한다면 기존의 배열을 한번 복사하고 나서 사용해야한다.
불변성을 지키면서 배열에 새 항목을 추가하는 방법은 spread 연산자를 사용하는 것이다.
App.js
import React, { useRef, useState } 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: 'programexplorer', email: 'programexplorer@naver.com' }, { id: 2, username: 'tester', email: 'tester@gmail.com' }, { id: 3, username: 'liz', email: 'liz@daum.net' } ]); 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;
실행 결과


'개발 공부한 내용 정리 > React' 카테고리의 다른 글
React- 배열의 항목 수정하기 (0) | 2020.09.04 |
---|---|
React- 배열의 항목 제거 하기 (0) | 2020.09.03 |
React- 배열 렌더링 하기 (0) | 2020.09.01 |
React- useRef 로 특정 DOM 선택하기 (0) | 2020.08.31 |
React- 여러개의 Input 상태 관리하기 (0) | 2020.08.30 |