따라하며 배우는 리액트 A-Z
[프론트엔드, 웹 개발] 강의입니다.
이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다.
✍️
이런 걸
배워요!
리액트
NextJS
타입스크립트
정적 사이트 자동 배포
도커
강의: https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8#
강의 자료 : https://github.com/braverokmc79/DiagramPDF
소스: https://github.dev/braverokmc79/react-todo-app
[3].To-Do 앱 최적화 하기
23.리액트 불변성 지키기
강의:
24.List 컴포넌트 생성하기
강의:
List.js
import React from 'react';
const List = ({ id, completed, title, todoData, setTodoData, provided, snapshot }) => {
const handleClick = (id) => {
let newTodoData = todoData.filter(data => data.id !== id);
setTodoData(newTodoData);
}
const handleCompleteChange = (id) => {
let newTodoData = todoData.map(data => {
if (data.id === id) {
data.completed = !data.completed;
}
return data;
});
setTodoData(newTodoData);
}
return (
<div key={id}
{...provided.draggableProps}
ref={provided.innerRef}
{...provided.dragHandleProps}
className={snapshot.isDragging ? "selected" : "not-selected"}
>
<div className={`${snapshot.isDragging ? "bg-gray-100" : "bg-gray-400"} flex items-center
justify-between w-full px-4 py-1 my-2 text-gray-600 border rounded`}
key={id}>
<div>
<input type="checkbox" defaultChecked={completed} onChange={() => handleCompleteChange(id)} />
<span className={`${completed ? "line-through" : undefined} px-2`}>{title}</span>
</div>
<div className='items-center'>
<button className='px-4 py-2 float-right' onClick={() => handleClick(id)}>x</button>
</div>
</div>
</div>
);
};
export default List;
Lists.js
~
{(provided, snapshot) => (
<List
id={data.id}
completed={data.completed}
title={data.title}
todoData={todoData}
setTodoData={setTodoData}
provided={provided}
snapshot={snapshot}
/>
)}
~
25.React.memo 를 이용한 렌더링 최적화
강의 :
26.useCallback 을 이용한 함수 최적화
강의:
27.useMemo를 이용한 결과 값 최적화
강의 :
28.리액트 확장 프로그램 추가하기
강의 :
29.할 일 리스트 모두 지우기 버튼 생성
강의:
30.할 일 목록을 수정하는 기능 추가하기
강의:
componetnts/List.js
import React, { useState, useCallback } from 'react';
const List = React.memo(({ id, completed, title, todoData, setTodoData, provided, snapshot, handleClick }) => {
const [isEditing, setIsEditing] = useState(false);
const [editTitle, setEditTitle] = useState(title);
const handleCompleteChange = useCallback((id) => {
let newTodoData = todoData.map(data => {
if (data.id === id) {
data.completed = !data.completed;
}
return data;
});
setTodoData(newTodoData);
}, [todoData, setTodoData]);
const handleEditChange = useCallback((e) => {
setEditTitle(e.target.value);
}, [setEditTitle]);
const handleSubmit = () => {
console.log(" id : ", id);
let newTododata = todoData.map((data) => {
if (data.id === id) {
data.title = editTitle;
}
return data;
});
setTodoData(newTododata);
setIsEditing(false);
};
if (isEditing) {
return (
<div className="bg-gray-100 flex items-centerjustify-between w-full px-4 py-1 my-2 text-gray-600 border rounded">
<form onSubmit={handleSubmit}>
<input className='w-full px-3 py-2' value={editTitle} onChange={handleEditChange} autoFocus />
</form>
<div className='items-center'>
<button className='px-4 py-2 float-right' onClick={() => handleClick(id)}>x</button>
<button className='px-4 py-2 float-right' type="submit" onClick={handleSubmit}>저장</button>
</div>
</div >
);
} else {
return (
<div key={id}
{...provided.draggableProps}
ref={provided.innerRef}
{...provided.dragHandleProps}
className={snapshot.isDragging ? "selected" : "not-selected"}
>
<div className={`${snapshot.isDragging ? "bg-gray-300" : "bg-gray-100"} flex items-center
justify-between w-full px-4 py-1 my-2 text-gray-600 border rounded`}
key={id}>
<div>
<input type="checkbox" defaultChecked={completed} onChange={() => handleCompleteChange(id)} />
<span className={`${completed ? "line-through" : undefined} px-2`}>{title}</span>
</div>
<div className='items-center'>
<button className='px-4 py-2 float-right' onClick={() => handleClick(id)}>x</button>
<button className='px-4 py-2 float-right' onClick={() => setIsEditing(true)}>수정</button>
</div>
</div>
</div>
);
}
});
export default List;
31.localStorage에 todoData 값 담기
강의:
[Firebase] Firebase 웹 호스팅 생성, 배포하기
https://lxxyeon.tistory.com/38
[react] firebase 프로젝트 배포하기
https://phrygia.github.io/react/2021-10-27-react-firebase/
도메인상태
기본
기본
댓글 ( 4)
댓글 남기기