반응형
📌임시 데이터 생성
const mokData = [
{
id: 0,
isDone: false,
content: '리액트 공부',
date: new Date().getTime(),
},
{
id: 1,
isDone: false,
content: '치과',
date: new Date().getTime(),
},
{
id: 2,
isDone: false,
content: '운동하기',
date: new Date().getTime(),
},
{
id: 3,
isDone: false,
content: '장보기',
date: new Date().getTime(),
},
];📌리스트 추가하기
App.jsx
import { useState, useRef } from 'react';
import './App.css';
import Header from './components/Header';
import Editor from './components/Editor';
import List from './components/List';
function App() {
const [todos, setTodos] = useState(mokData);
const idRef = useRef('4');
const onCreate = (content) => {
const newTodo = {
id: idRef.current++,
isDone: false,
content: content,
date: new Date().getTime(),
};
setTodos([newTodo, ...todos]);
};
return (
<div className='App'>
<Header />
<Editor onCreate={onCreate} />
<List />
</div>
);
}
export default App;- state의 값은 반드시 상태 변화 함수를 호출해야 수정할 수 있음
Editor.jsx
import { useState } from 'react';
function Editor({ onCreate }) {
const [input, setInput] = useState('');
const onChange = (e) => {
setInput(e.target.value);
};
const onSubmit = () => {
onCreate(input);
};
return (
<div className='Editor'>
<input value={input} onChange={onChange} placeholder='새로운 Todo...' />
<button onClick={onSubmit}>추가</button>
</div>
);
}
export default Editor;
📌완성한 Create를 Develop하기
빈 항목일 때
입력칸에 아무것도 없을 때 '추가' 버튼을 누른다면 추가하지 않고 해당 입력칸 포커스 주기
// 새로운 래퍼런스 객체 생성
const inputRef = useRef();
const onSubmit = () => {
// 조건문
if (input === '') {
inputRef.current.focus();
return;
}
onCreate(input);
};
// 속성 추가
<input ref={inputRef}/>- 새로운 래퍼런스를 생성한 뒤 input 속성에 ref를 추가함
- state인 input의 값이 비어있다면 inputRef값에 포커스 한 뒤 리턴함
값을 입력했을 때
새로운 값을 또 입력하기 위해서 데이터로 잘 들어간 값은 지워주기
onCreate(input);
setInput('');- onSubmit() 함수가 실행되었을 때 onCreate() 함수를 호출한 뒤 state를 빈 문자열로 초기화 하기
엔터키를 입력했을 때
키보드에 'enter'를 입력해도 리스트 추가하기
const onKeyDown = (e) => {
if (e.keyCode === 13) {
onSubmit();
}
<input onKeyDown={onKeyDown}/>- input의 키보드를 눌렀을 때 이벤트를 발생하는 onKeyDown 속성 추가하기
- enter의 keyCode인 13번이 들어왔을 때 onCreate() 함수를 호출하기
📌최종코드
App.jsx
import { useState, useRef } from 'react';
import './App.css';
import Header from './components/Header';
import Editor from './components/Editor';
import List from './components/List';
const mokData = [
{
id: 0,
isDone: false,
content: '리액트 공부',
date: new Date().getTime(),
},
{
id: 1,
isDone: false,
content: '치과',
date: new Date().getTime(),
},
{
id: 2,
isDone: false,
content: '운동하기',
date: new Date().getTime(),
},
{
id: 3,
isDone: false,
content: '장보기',
date: new Date().getTime(),
},
];
function App() {
const [todos, setTodos] = useState(mokData);
const idRef = useRef('4');
const onCreate = (content) => {
const newTodo = {
id: idRef.current++,
isDone: false,
content: content,
date: new Date().getTime(),
};
setTodos([newTodo, ...todos]);
};
return (
<div className='App'>
<Header />
<Editor onCreate={onCreate} />
<List />
</div>
);
}
export default App;Editor.jsx
import { useRef, useState } from 'react';
function Editor({ onCreate }) {
const [input, setInput] = useState('');
const inputRef = useRef();
const onChange = (e) => {
setInput(e.target.value);
};
const onSubmit = () => {
if (input === '') {
inputRef.current.focus();
return;
}
onCreate(input);
setInput('');
};
const onKeydonwn = (e) => {
if (e.keyCode === 13) {
onSubmit();
}
};
return (
<div className='Editor'>
<input
value={input}
ref={inputRef}
onChange={onChange}
onKeyDown={onKeydonwn}
placeholder='새로운 Todo...'
/>
<button onClick={onSubmit}>추가</button>
</div>
);
}
export default Editor;
참고자료
이정환 Winterlood, '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지'
반응형
댓글