간단한 과제 소개todoList 형태의 메달(금, 은, 동) 데이터 관리 페이지국가 및 메달 개수 입력 가능입력한 국가별 메달 현황 확인입력, 삭제, 수정, 정렬페이지 레이아웃은 위와 같다. 상단에 데이터를 입력, 수정할 수 있는 폼이 있고 하단에 테이블 형태로 list를 확인할 수 있다. list 영역에서 반복가능한 데이터는 크게 2가지가 있다. 첫 번째는 헤더 부분 "국가명 금 은 동 액션"이 있고 두 번째는 각 나라별 데이터 목록이다. 우선 두 번째 데이터 목록 부분부터 어떻게 반복시킬수 있을지 살펴 보자. 💡 행 반복 + 열 반복 - Object.values()데이터 한 줄 한 줄이( "미국 132 0 0 버튼" ) 하나의 행이다. 전체 데이터 구조는 배열내의 객체들로 이루어져 있다. coun..
💡 전역 상태관리 - Redux📍 useState의 불편함 컴포넌트의 state를 공유할 때 Props를 통해 부모 컴포넌트에서 자식 컴포넌트로 전달하게 된다. 아니 그래야만 한다. 1. 반드시 부모-자식 관계가 되어야 공유가 가능하다.2. prop drilling이 발생하고 불필요한 코드가 생긴다. (props를 받아서 전달만 하는 컴포넌트는 불필요하다.)3. 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없다. 📍 리덕스를 사용하면state를 공유할 때 부모-자식 관계가 아니어도 된다중간에 의미 없는 props의 전달 과정이 없어도 된다. 자식 컴포넌트에서 만든 state를 부모 컴포넌트에서 사용이 가능하다. 💡 Global state & Local StateGlobal state는 redu..
배포 시 프로젝트의 `public` 폴더에 넣은 자료(이미지, 폰트 등)는 자동으로 최상위(루트)경로로 인식이 된다. 예를 들어 사진이 `/public/assets/logo.png` 라는 경로에 존재할 경우 다음과 같이 매핑을 시켜주면 된다.`src="/assets/logo.png"` (`public` 생략)