[ React ] 리액트의 props와 state의 역할, 컴포넌트의 라이프 사이클, 리액트 컴포넌트를 만드는 방법 () => 비유로써 재밌게!!

리액트의 Props와 State

비유 1: 카페에서의 주문

• Props: 카페에서 바리스타에게 커피를 주문할 때, 너는 "아이스 아메리카노, 더블 샷, 설탕 없이"와 같은 특별한 요구사항을 말한다. 여기서 너의 주문은 바리스타(컴포넌트)에게 전달되는 props다. 즉, 컴포넌트 외부에서 받아오는 데이터로, 주로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용한다. 이 정보는 읽기 전용이며, 컴포넌트가 직접 수정할 수 없다.
• State: 이제 바리스타가 주문을 받고, 커피를 만드는 동안 커피의 상태(예: 갈아진 커피, 물 추가, 얼음 추가)는 바뀐다. 이러한 내부 상태 변화는 컴포넌트의 state에 해당한다. 즉, 컴포넌트 내부에서 관리되는 데이터로, 사용자와의 상호작용이나 시간의 경과에 따라 변경될 수 있다.

컴포넌트의 라이프 사이클

비유 2: 식물의 성장

• 초기화(Initialization): 씨앗을 심는 순간, 식물은 자라기 시작한다. 리액트 컴포넌트도 마찬가지로 생성되어 초기화 단계를 거친다.
• 성장(Mounting): 식물이 자라면서 뿌리를 내리고 잎이 나오기 시작한다. 리액트에서는 컴포넌트가 DOM에 삽입되는 단계를 의미한다.
• 업데이트(Updating): 식물에 물을 주고 햇빛을 쬐게 하면, 성장하며 변화한다. 마찬가지로, 컴포넌트도 props나 state의 변경으로 업데이트된다.
• 죽음(Unmounting): 식물이 죽어서 자연으로 돌아가듯, 컴포넌트도 DOM에서 제거되는 단계를 겪는다.

리액트 컴포넌트를 만드는 방법

비유 3: 레고 블록

• 리액트 컴포넌트를 만드는 것을 레고 블록을 조립하는 것에 비유할 수 있다. 각각의 레고 블록은 작은 기능의 단위로서, 이 블록들을 조합하여 더 크고 복잡한 구조(애플리케이션)를 만들 수 있다. 레고 블록처럼, 컴포넌트도 재사용 가능하고 조합 가능하다.