2024-03-25 (71일차) - 리액트 스타일 입히기, 리액트로 TODO 구현하기
📅 2024-03-25 71일차
분석해봐야 하는 코드
-
나는 아직 컴포넌트화가 헷갈리고, 변수사용방법이라던지 기초적인 부분이 많이 모자란 것 같다..
-
아래 코드를 계속 분석해보고 자주 들여다봐서 익숙해지자
-
리액트(React), NumberRecorderListItem 수정모드 input 태그의 값 변경 허용 후 수정
리액트 스타일 입히기
리액트로 TODO 구현하기
setTimeout(function()
- 사용하여 5초마다 자동으로 할일 추가 되도록 (틀)
const App = () => {
const [todos, setTodos] = useState([]);
//setTimeout : App이 랜더링 된 후 5초 뒤에 이 코드를 한 번 실행
setTimeout(function(){
setTodos([...todos,todos.length + 1]);
},5000); //5초
return (
<>
<div></div>
<hr />
<div>
{JSON.stringify(todos)}
</div>
</>
);
};'할 일 추가' 버튼으로 TODO 추가하기
const App = () => {
const [todos, setTodos] = useState([]);
const [newTodoTitle, setNewTodoTitle] = useState("");
const addTodo = () => {
setTodos([...todos,newTodoTitle]);
}
return (
<>
<div className="flex gap-x-3">
<input
className="input input-bordered"
type="text"
placeholder="할 일 적어"
value={newTodoTitle}
onChange={(e) => setNewTodoTitle(e.target.value)}
/>
<button className="btn btn-primary" onClick={addTodo}>
할 일 추가
</button>
</div>
<hr />
<div>{JSON.stringify(todos)}</div>
</>
);
};
TODO 추가하기 폼을 별도의 컴포넌트로 분리
바로 위 코드에서는 html폼을 App함수에서 직접 return하였으나, 기능을 재사용하는 컴포넌트는 따로 분리해서 리턴한다
// 폼을 별도의 컴포넌트로 컴포넌트화 시켜서 분리시킨다
const TodoWriteForm = ({ newTodoTitle, setNewTodoTitle, addTodo }) => {
return (
<>
<div className="flex gap-x-3">
<input
className="input input-bordered"
type="text"
placeholder="할 일 적어"
value={newTodoTitle}
onChange={(e) => setNewTodoTitle(e.target.value)}
/>
<button className="btn btn-primary" onClick={addTodo}>
할 일 추가
</button>
</div>
</>
);
};
const App = () => {
const [todos, setTodos] = useState([]);
const [newTodoTitle, setNewTodoTitle] = useState("");
const addTodo = () => {
const trimmedTitle = newTodoTitle.trim();
if(trimmedTitle.length == 0) return;
setTodos([...todos, trimmedTitle]);
setNewTodoTitle("");
};
return (
// 분리시킨 컴포넌트를 리턴한다
<>
<TodoWriteForm
newTodoTitle={newTodoTitle}
setNewTodoTitle={setNewTodoTitle}
addTodo={addTodo}
/>
<hr />
<div>{JSON.stringify(todos)}</div>
</>
);
};
hello world