본문 바로가기

Programing/TIL85

2024-05-27 리액트 숙련과제 (2) 버튼 눌러 필터링 된 data 정보를 로컬스토리지에 담고 꺼내어 활용하기지금까지 했던 작업은 버튼을 누른 것이 재접속을 하거나 새로고침을 하면 풀려버린다. 그런데 이를 로컬 스토리지에 저장하고 이를 불러와서 렌더링한다면 사용자가 버튼을 눌러 놓은 상태를 기억하고 재접속하거나 새로고침해도 풀리지 않는다. 페이지에 처음 접속했을 때는 아무 버튼도 누르지 않았으니 전체 data를 렌더링하고, 버튼을 누를 때 로컬스토리지에 해당 월의 배열을 저장하고, 이를 불러와서 렌더링 하는 방식으로 리팩토링하고자 한다.처음부터 이렇게 작업했다면 수월했겠지만 과제 수행 순서를 맞추다보니 대공사를 해야 하는 소요가 발생했다. 뿐만 아니라 clickedMonthBtn 상태를 App 컴포넌트에서 정의하고 props-drilling.. Programing/TIL 2024. 5. 28.
2024-05-24 리액트 숙련 과제 (1) 리액트 숙련과제 의사코드#공부/코딩과제 요구사항 체크필수 구현사항 체크하기지출 CRUD 구현 (작성, 조회, 수정, 삭제)월별 지출 조회 기능 구현 (Home - Read)월별 지출 항목 등록 구현 (Home - Create)지출 상세 화면 구현 (Detail - Read)상세화면에서 지출 항목 수정 구현 (Detail - Update)상세화면에서 지출 항목 삭제 구현 (Detail - Delete)필수 요구사항 체크하기styled-components 를 이용하여 스타일링인라인 스타일링이나 일반 css 파일을 이용한 스타일링 방식 지양 (이번 과제 한정)모든 태그를 styled-components 화 할 필요는 없으나 스타일링이 들어가는 경우는 styled-components 화 할 것styled-com.. Programing/TIL 2024. 5. 27.
2024-05-23 React의 상태관리 상황React는 변수를 state로 정의하고 값이 계속 바뀔 때마다 그 부분만 화면을 재 렌더링 해주기 때문에 사용성도 좋고 빠르다고 이해했다.그런데 이 상태가 너무 자주 변경되면 상태가 바뀔 때마다 전체를 재 렌더링하기 때문에 성능 저하가 올 수 있고 렌더링이 씹힐 수 있다.// Button.jsx(자식 컴포넌트)// TODO: FilterButtons 컴포넌트를 작성하세요. 필터링 옵션을 선택하는 버튼들을 포함해야 합니다.function FilterButtons(/* 필요한 props를 여기에 전달하세요 */ { initialStudents, filteredStudents, setFilteredStudents}) { const filterByAge = (minAge) => { setFilte.. Programing/TIL 2024. 5. 23.
2024-05-22 [React] state를 이용하여 화면에 렌더링 되는 배열 필터링하기 import { useState } from "react";function App() { const initialStudents = [ { name: "Alice", age: 17, grade: "A" }, { name: "Bob", age: 18, grade: "B" }, { name: "Charlie", age: 16, grade: "C" }, { name: "Diana", age: 19, grade: "D" }, { name: "Elmo", age: 20, grade: "E" }, { name: "Fiona", age: 21, grade: "F" }, { name: "Gabe", age: 22, grade: "A" }, { name: "Hannah", a.. Programing/TIL 2024. 5. 21.
2024-05-21 [React] state로 렌더링 되는 데이터 필터링하기 import { useState } from "react";function App() { const students = [ { name: "Alice", age: 17, grade: "A" }, { name: "Bob", age: 18, grade: "B" }, { name: "Charlie", age: 16, grade: "C" }, { name: "Diana", age: 19, grade: "D" }, { name: "Elmo", age: 20, grade: "E" }, { name: "Fiona", age: 21, grade: "F" }, { name: "Gabe", age: 22, grade: "A" }, { name: "Hannah", age: 23,.. Programing/TIL 2024. 5. 21.