[React] 컴포넌트 속성에 컴포넌트 전달하기
·
Programming/React
🎯 React에서 children을 활용한 유연한 컴포넌트 만들기React에서 컴포넌트를 만들다 보면, 내부에 어떤 내용이 들어올지 모르는 컨테이너 역할의 컴포넌트를 만들 일이 많다. 예를 들어, Sidebar, Dialog, Card 같은 컴포넌트들은 내부에 들어갈 요소가 정해져 있지 않다.이럴 때 React의 children prop을 활용하면 꽤 유연하게 컴포넌트를 만들 수 있다. 하지만 children 외에도 특정 prop으로 컴포넌트를 직접 전달하는 방식도 있는데, 이 방법을 활용하면 더 구조적으로 UI를 구성할 수도 있다.이번에 children과 특정 prop을 활용해 재사용 가능한 컴포넌트를 어떻게 만들고 활용할 수 있는지 직접 예제를 통해 정리해 보자.children prop이란?chil..
[React] React 완벽 가이드 - 섹션 5: React로 투자 계산기 만들기 | 개발 회고
·
Programming/React
이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. 💡 프로젝트 개요자세한 코드는 여기로 👉 https://github.com/An0401na/React_Study/tree/main/01-starting-project이번 프로젝트에서는 React를 활용한 투자 계산기를 개발했다.사용자가 입력한 데이터를 기반으로 연간 투자 금액, 예상 수익률, 투자 기간을 계산하여매년 누적된 투자 금액과 이자를 시각적으로 보여주는 기능을 구현했다.React: 컴포넌트 기반 UI 개발useState: 사용자 입력값을 상태로 관리map(): 배열 데이터를 테이블 형식으로 렌더링Intl.NumberFormat: 숫자를 화폐 단위로 ..