스터디 로그

✔️ 해당 글은 John Ahn님의 인프런강좌 "따라하며 배우는 리액트 A-Z"를 들으며 작성합니다. 마지막으로 localStorage에 데이터를 저장해보겠습니다. 현재 만들고 있는 Todo List는 새로고침을 하면 할 일 아이템이 빈값으로 돌아갑니다. 작성한 데이터를 localStorage에 저장하여 새로고침해도 남아있도록 만들고자합니다. localStorage 사용법 https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage Window.localStorage - Web API | MDN localStorage** **읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 ..

Study with me 2022. 9. 7. 23:58

✔️ 해당 글은 John Ahn님의 인프런강좌 "따라하며 배우는 리액트 A-Z"를 들으며 작성합니다. 이번에는 할 일 아이템을 수정, 저장하는 기능을 생성하겠습니다. 각 할 일 아이템의 삭제 버튼 옆에 EDIT버튼을 만들고, 그 버튼을 클릭하면 할 일 아이템의 ui를 바꿔서 글 수정이 가능하게하고, EDIT버튼이 SAVE버튼이 되어 수정한 글을 저장할 수 있도록 만들고자합니다. 1️⃣ State 만들기 Item컴포넌트로 가서 State 두 개를 만듭니다. 하나는 글을 수정하는 State, 다른 하나는 수정이 완료된 글 State입니다. const [IsEditing, setIsEditing] = useState(false); const [editedTitle, setEditedTitle] = useSta..

Study with me 2022. 9. 7. 22:55

✔️ 해당 글은 John Ahn님의 인프런강좌 "따라하며 배우는 리액트 A-Z"를 들으며 작성합니다. 이번 시간에는 React.memo와 useCallback을 이용한 렌더링 최적화에 대해 배우겠습니다. 필요한 경우가 아니라면 렌더링을 줄이는 것이 앱을 최적화하는 데 도움이 될 것입니다. 현재 총 4개의 컴포넌트들이 있고, 각 컴포넌트별로 console.log를 통해 언제 어떻게 렌더링되는 지 알아보겠습니다. 1️⃣ 언제 무엇이 어떻게 렌더링 되는지 알아보기 앱을 바로 켰을 때 Container, List, Add 그리고 Item 컴포넌트 모두 렌더링 된 것을 볼 수 있습니다. 새로 할 일 아이템을 작성하는 input에 타이핑을 하면 그 input이 있는 Add컴포넌트가 렌더링 되는것을 볼 수 있습니다...

Study with me 2022. 9. 7. 16:00

✔️ 해당 글은 John Ahn님의 인프런강좌 "따라하며 배우는 리액트 A-Z"를 들으며 작성합니다. 이제 완료 전후를 구분하기 위한 체크박스가 체크되었을 때 아이템 타이틀에 중앙선을 그어주는 효과를 넣겠습니다. 1️⃣ checkbox에 onChange 함수 설정하기 input type="checkbox"를 나타내는 styled component Checkbox에 onChange 함수를 넣습니다. 함수 이름은 handleCompetedChange 이고, map()을 통해 얻은 각 하나의 할 일 아이템의 id를 받습니다 onChange={() => handleCompetedChange(item.id)} handleCompetedChange 함수를 작성합니다. const handleCompetedChange..

Study with me 2022. 9. 6. 23:03

✔️ 해당 글은 John Ahn님의 인프런강좌 "따라하며 배우는 리액트 A-Z"를 들으며 작성합니다. 지난 시간에 이어, 할 일 목록에서 x 버튼을 클릭했을 때 해당 아이템을 삭제하는 기능을 추가하겠습니다. 1️⃣Filter()를 사용해서 할 일 목록 삭제하기 1) 버튼에 onClick 이벤트를 넣고, handleClick(item.id)}>X 2) 버튼을 클릭했을 때 해당 아이템을 제외한 나머지 목록이 다시 나열되도록 filter()를 사용 3) 이 때 해당 아이템이 무엇인지 특정할 수 있도록 item.id를 파라미터로 사용 const handleClick = (id) => { let newTodoData = todoData.filter((item) => item.id !== id); console.l..

Study with me 2022. 9. 6. 16:20