제인의 블로그

React 기본 구조와 스타일링 1. React의 기본 개념  주요 개념 설명 - 컴포넌트 기반 아키텍처: React는 컴포넌트를 사용하여 UI를 만들고 관리합니다. 각 컴포넌트는 독립적이고 재사용 가능한 코드 블록이며, 다른 컴포넌트와 조합하여 전체 애플리케이션의 UI를 구성합니다. - UI 선언적 접근: React는 선언적(Declarative) 방식으로 UI를 정의합니다. 즉, UI가 특정 상태에 대해 어떻게 보여야 하는지를 선언적으로 작성하고, React가 이를 렌더링하고 관리하게 합니다. 사용 시나리오 - 컴포넌트 기반 아키텍처는 애플리케이션의 복잡성을 줄여주며, 특히 재사용 가능한 컴포넌트를 개발할 때 유용합니다. 예를 들어, 버튼, 카드, 모달 창과 같은 UI 요소는 개별 컴포넌트로 만들고,..

Q. 이름이 같은 컴포넌트를 동시에 import 하려면 어떻게 해야 하는지 적어보세요.  A. 이름이 같은 컴포넌트를 동시에 import해야 할 때는 별칭을 사용하여 구분할 수 있습니다. 예를 들어, Button이라는 이름을 가진 컴포넌트가 두 파일에 각각 있을 때, 다음과 같이 as 키워드를 사용하여 별칭을 붙여서 import합니다 :)import { Button as PrimaryButton } from './PrimaryButton';import { Button as SecondaryButton } from './SecondaryButton';  Q. 여러 컴포넌트를 하나의 파일에서 export하는 방법에 대해 적어보세요. A1. named export 파일에서 여러 컴포넌트를 각각 export하고..

Q. ## **Day 3: 메달 집계 수정 및 삭제 기능 구현** ### 1. **메달 집계 업데이트 기능** - 이미 추가된 국가의 메달 수를 수정할 수 있는 기능을 추가합니다. - **구체적인 구현**: - 수정하려는 국가의 데이터를 입력한 후 [업데이트] 버튼을 클릭하면 해당 국가의 메달 수가 변경됩니다. - 입력한 나라 이름을 기반으로 리스트에서 해당 국가를 찾아 수정합니다. ### 2. **메달 집계 삭제 기능** - 각 나라 옆에 삭제 버튼을 추가하여, 클릭 시 해당 국가의 메달 집계가 리스트에서 제거되도록 합니다. - **구체적인 구현**: - filter 메서드를 활용하여 선택된 국가를 제외하고 나머지 국가들로 리스트를 재구성합니다. ### 3. **최종 확인 및 코드 정리** - 작성한 ..