블로그 목록 프론트엔드 건축학

리액트(React) 핵심: 컴포넌트, Props, State 완벽 이해 가이드

수십억 원짜리 신축 아파트에 입주한다고 상상해 보겠습니다. 현관문을 열고 들어가면 시공사가 미리 설치해 둔 최고급 '빌트인 냉장고'와 '시스템 에어컨'이 우리를 반깁니다. 이것들은 우리가 함부로 뜯어고칠 수 없는 고정된 옵션이죠. 하지만 에어컨의 '희망 온도'를 몇 도로 설정할지, 거실의 '조명'을 켤지 끌지는 전적으로 입주민인 우리의 마음입니다.


갑자기 웬 부동산 입주 이야기냐고요? 놀랍게도 이 비유 안에 오늘 우리가 배울 현대 프론트엔드 개발의 꽃, 리액트(React)의 3대 핵심 개념이 모두 숨어있기 때문입니다.


지난 9편에서 우리는 페이지 전체를 새로고침하지 않고 필요한 부분만 부드럽게 교체하는 SPA(Single Page Application)의 원리와 가상 돔(Virtual DOM)에 대해 알아보았습니다. 오늘은 완벽하게 세팅된 개발 환경 위에서, 리액트라는 모듈러 건축의 뼈대를 세우고 생명력을 불어넣는 컴포넌트(Component), 프롭스(Props), 그리고 스테이트(State)에 대해 완벽하게 파헤쳐 보겠습니다. 이 세 가지만 제대로 이해해도 리액트의 70%는 마스터했다고 감히 말씀드릴 수 있습니다.


1. 리액트 컴포넌트(Component): 똑똑한 모듈러 주택의 완성

건축에서 '모듈러 공법'을 아시나요? 공장에서 욕실, 주방, 거실 등의 공간(모듈)을 미리 완성한 뒤, 현장에서는 레고 블록처럼 조립만 해서 건물을 올리는 최신 건축 기법입니다. 공사 기간을 획기적으로 단축하고 하자를 줄일 수 있죠.


리액트의 컴포넌트(Component)가 바로 이 '모듈'과 정확히 일치합니다. 과거에는 웹 페이지 하나를 통째로 길게 코딩했다면, 리액트에서는 화면을 구성하는 요소들을 독립적인 블록으로 쪼갭니다.


  • 헤더(Header) 컴포넌트: 아파트의 화려한 문주(입구)
  • 네비게이션바(NavBar) 컴포넌트: 층수를 안내하는 엘리베이터 버튼
  • 매물 리스트(ItemList) 컴포넌트: 각 세대의 우편함
  • 하단(Footer) 컴포넌트: 건물의 기초 설계 정보

이렇게 만들어진 컴포넌트는 '재사용(Reusability)'이 가능합니다. A 아파트 단지에 썼던 훌륭한 조경 모듈을 B 아파트 단지에도 그대로 가져다 쓸 수 있는 것처럼, 한 번 잘 만들어둔 '버튼 컴포넌트'나 '입력창 컴포넌트'는 프로젝트 내내, 혹은 다른 프로젝트에서도 무한히 재사용할 수 있습니다. 이것이 바로 전 세계 개발자들이 리액트에 열광하는 첫 번째 이유입니다.


2. Props(프롭스): 시공사가 제공하는 '빌트인 옵션'

자, 이제 아파트(컴포넌트)의 틀이 완성되었습니다. 그런데 똑같은 구조의 101동 101호와 102호가 완전히 똑같기만 하다면 재미가 없겠죠? 101호는 '남향'에 'A타입 평면'이고, 102호는 '동향'에 'B타입 평면'일 수 있습니다.


이처럼 부모 컴포넌트(시공사 또는 아파트 단지)가 자식 컴포넌트(개별 세대)에게 전달하는 '고정된 정보나 옵션'을 리액트에서는 Props(Properties의 약자)라고 부릅니다.


Props의 핵심 특징: "입주민은 빌트인 가구를 마음대로 부술 수 없다"

Props의 가장 중요한 원칙은 '읽기 전용(Read-only)'이라는 것입니다. 데이터는 항상 위에서 아래로(부모에서 자식으로) 흐릅니다. 이를 전문 용어로 단방향 데이터 바인딩이라고 합니다. 마치 옥상의 물탱크에서 각 세대로 수돗물이 흘러내려 가는 이치와 같습니다. 자식 컴포넌트는 부모가 물려준 Props를 받아서 화면에 보여줄 수는 있지만, 그 값을 직접 수정할 수는 없습니다. 만약 빌트인 냉장고(Props)의 색상을 바꾸고 싶다면, 입주민(자식)이 직접 페인트를 칠하는 게 아니라 시공사(부모)에게 교체를 요청해야만 합니다.


부동산 매물 카드로 보는 Props 예시

직방이나 네이버 부동산 같은 앱을 보면 수백 개의 매물 카드가 있습니다. 이 매물 카드 컴포넌트는 하나만 만들어두고, Props를 통해 각기 다른 데이터를 주입합니다.


  • 첫 번째 카드 Props: { 매물명: "반포 자이", 가격: "30억", 평수: "34평" }
  • 두 번째 카드 Props: { 매물명: "마포 래미안", 가격: "15억", 평수: "24평" }

이렇게 Props를 활용하면 단 하나의 '매물 카드 도면(컴포넌트)'으로 수만 개의 각기 다른 매물을 화면에 찍어낼 수 있습니다. 정말 효율적이죠?


3. State(스테이트): 입주민이 마음대로 바꾸는 '실내 환경'

시공사가 준 옵션(Props)만으로는 사람이 살 수 없습니다. 밤이 되면 조명을 켜야 하고, 더우면 에어컨 온도를 낮춰야 합니다. 이처럼 컴포넌트 내부에서 스스로 관리하며, 시간에 따라 변할 수 있는 동적인 데이터를 State(상태)라고 부릅니다.


Props가 외부에서 주어지는 '설계도'라면, State는 내부에서 살아 숨 쉬는 '라이프스타일'입니다.


State의 핵심 특징: "상태가 변하면, 화면은 즉시 리모델링(Re-rendering) 된다"

리액트가 진정으로 강력한 이유는 바로 이 State의 변화를 감지하는 능력에 있습니다. 입주민이 보일러 온도를 22도에서 24도로 올리는 순간(State 변경), 리액트 엔진은 이를 즉각 알아채고 화면의 온도계 숫자를 24도로 다시 그려냅니다(Re-rendering). 지난 9편에서 배운 '가상 돔(Virtual DOM)'이 바로 이때 활약합니다. 집 전체를 부수고 다시 짓는 게 아니라, 오직 '온도계 숫자'라는 필요한 부분만 0.01초 만에 싹 바꿔치기하는 것이죠.


실전 시나리오: '관심 매물 찜하기' 버튼

우리가 부동산 앱에서 특정 아파트가 마음에 들어 '♥ (하트)' 버튼을 누른다고 가정해 봅시다.


  1. 초기 상태: isLiked = false (빈 하트 ♡)
  2. 사용자 행동: 사용자가 하트 버튼을 클릭합니다.
  3. State 변경: 리액트 내부에서 isLiked = true 로 상태가 바뀝니다.
  4. 리렌더링: 리액트가 재빨리 화면을 업데이트하여 빨간색 꽉 찬 하트(♥)를 보여줍니다.

이 모든 과정이 페이지 새로고침 없이 물 흐르듯 자연스럽게 일어납니다. 이것이 바로 State가 만들어내는 마법 같은 사용자 경험(UX)입니다.


4. Props와 State의 완벽한 조화: 헷갈리지 않는 핵심 정리

처음 리액트를 접하는 분들은 Props와 State를 자주 혼동합니다. 부동산 전문가인 제가 이 둘의 차이를 절대 잊어버리지 않도록 표로 깔끔하게 정리해 드리겠습니다.


구분Props (프롭스)State (스테이트)
부동산 비유시공사가 제공한 빌트인 옵션입주민이 설정한 실내 환경
데이터 주체부모 컴포넌트가 결정하여 전달자신(컴포넌트 내부)이 직접 관리
변경 가능성자식 입장에서는 수정 불가 (Read-only)자유롭게 수정 가능 (Mutable)
주요 용도초기 데이터 세팅, 레이아웃 구조화사용자 입력, 버튼 클릭 등 동적 상호작용

여기서 중요한 포인트는요, 훌륭한 프론트엔드 개발자는 어떤 데이터를 Props로 내릴지, 어떤 데이터를 State로 관리할지 명확하게 설계하는 사람이라는 것입니다. 모든 것을 State로 만들면 집안의 모든 가구가 시시각각 변하는 유령의 집처럼 코드가 복잡해지고 (스파게티 코드), 반대로 State를 전혀 쓰지 않으면 죽은 건물처럼 아무런 상호작용이 없는 지루한 웹사이트가 되어버립니다.


오늘의 요약 및 다음 단계

오늘은 리액트라는 거대한 건물을 지탱하는 세 개의 기둥에 대해 알아보았습니다.


  • 화면을 조립식 블록으로 쪼개는 컴포넌트(Component)
  • 부모가 자식에게 전달하는 고정된 옵션 Props
  • 사용자와 상호작용하며 화면을 살아서 움직이게 하는 State

이 세 가지 원리 덕분에 우리는 복잡한 웹 서비스도 체계적이고 유지보수하기 쉽게 개발할 수 있습니다. 뼈대를 세우고 인테리어의 원칙을 정했으니, 이제 본격적으로 집안에 '스마트홈 시스템'을 구축할 차례입니다.


다음 11편에서는 이 State를 더욱 마법처럼 다루게 해주는 리액트의 핵심 기술, '리액트 훅(React Hooks)의 세계와 데이터 생명주기(Lifecycle)'에 대해 본격적으로 파헤쳐 보겠습니다. 건물이 지어지고, 유지보수되고, 철거되는 부동산의 생애주기처럼 컴포넌트도 태어나고 죽는 과정이 있습니다. 다음 시간에도 흥미로운 비유와 함께 찾아오겠습니다. 이 블로그 즐겨찾기 해두시고, 프론트엔드 마스터의 길을 저와 함께 완주해 보시길 바랍니다!