[React] React Component, React Element, Props 의 개념

아래 내용은 인프런 SOAPLE 님의 '처음 만난 리액트(React)' 강의 내용을 요약 정리한 것임을 알려드립니다. 😀 무료 강의인데 내용이 정말 좋더라구요! 그럼 시작하겠습니다~!

---

 

리액트는 레고블록을 조립하듯 각각의 컴포넌트를 맞추어서 개발한다.

 

리액트 컴포넌트는 자바스크립트의 함수처럼 입력을 받아서 출력을 내뱉는데, 입출력이 일반 함수와는 조금 다르다.

 

---

입력: Props

|

React component

|
출력: React element

---

위와 같이, React Component는 어떠한 속성을 입력으로 받아서 그에 맞는 element 를 생성하여 리턴해준다.

그리하여 생성된 React element는 리액트 앱을 구성하는 가장 작은 빌딩 블록들이 된다.

이 친구는 자바스크립트의 객체 형태로 존재하며, 화면에 보이는 것을 기술한다.

 

이해하기 쉽게 비유하자면,

리액트 컴포넌트는 붕어빵 틀이고, 각각의 엘리먼트는 붕어빵이라고 생각하면 된다.

마치 객체지향 개념에서 등장하는 클래스와 인스턴스의 관계처럼 말이다.

 

 

---

 

그렇다면 props는 무엇일까?

 

props는 property 의 줄임말로 우리가 흔히 알고 있는 '재산' 뿐만 아니라 '특성', '속성'이라는 뜻을 가지고 있다.

무엇의 속성을 말하는 건가? 바로 React Component 의 속성이다.

즉, React Component가 붕어빵이라면, React property는 붕어빵에 들어가는 재료를 의미한다.

 

붕어빵은 모양은 항상 같지만 재료가 팥, 슈크림, 또는 고구마냐에 따라 맛이 달라진다.

이처럼 props 는 같은 React Component에서 눈에 보이는 글자나 색깔 등의 속성을 바꾸고 싶을 때 사용하는

컴포넌트의 속 재료라 생각하자. 

 

아래는 프로그래머스 스쿨 페이지인데, 저 하나의 강의 카드가 컴포넌트고,

props 의 값에 따라서 내용이 다른 각각의 카드가 생성될 수 있다는 것이다.

예시 1) Component 와 props [프로그래머스]

 

예시 2) Component 와 props [프로그래머스]

 

---

다음 시간에는 쭈욱 이어서 Props 의 특징 및 사용법에 대해 정리하도록 하겠습니다. 

읽어주셔서 감사합니다.  :)

도움이 되셨다면 공감 꾸욱 부탁해요!