React Micro Projects | Sanghwan An

Sanghwan
Frontend

BMI 계산기 (기본)

BMI 계산기 (컴포넌트 버전)

Requirements

키(cm)와 몸무게(kg)를 입력하면 BMI를 계산하여 표시
BMI 결과에 따라 “저체중 / 정상 / 과체중 / 비만 단계”를 분류하여 출력
기본 버전과 컴포넌트 분리 버전을 동일 페이지에서 모두 확인 가능
동일한 폼 컴포넌트가 2개 존재하는 상황에서도 값이 섞이지 않도록 구조화
B형 패턴(객체 기반 복수의 폼 상태 관리) 적용하여 state 꼬임 문제 해결
getCategory, BMI 계산 로직을 부모에서 관리하고 props로 전달

Memo

하나의 페이지에 같은 BMI 폼이 두 번 표시되면서 state가 공유되어 값이 서로 섞이는 문제가 발생했습니다.
이를 해결하기 위해 ‘기본 버전’과 ‘컴포넌트 버전’ 각각의 값을 따로 관리하는 패턴(객체 기반 상태 관리)을 적용했습니다.

덕분에 동일한 구조의 컴포넌트를 여러 개 사용해도 꼬이지 않도록 구조를 설계하는 방법을 배울 수 있었고, props 흐름과 컴포넌트 간 역할 분리 이해도가 크게 올라갔습니다.

작은 예제였지만 ‘컴포넌트를 어디까지 독립적으로 설계해야 하는가’에 대해 감을 잡을 수 있었고, 실제로 React 앱을 설계할 때 필요한 사고방식을 익힐 수 있는 의미 있는 연습이었습니다.