[TIL] 2020-03-16

[ groomedu ]

처음 만난 React(리액트) Componenets and Props까지 수강

 

[ 배운 내용 ]

< react에서 components란 >

- 리엑트를 구성하는 구성요소라는 뜻을 가지고 있다.
- 레고 블록을 조립하듯이 컴포넌트들을 모아서 개발하는 것과 같은 맥락이다. 
- 리엑트 컴포넌트에서 입력은 Props이고 출력은 React element이다.

붕어빵 컴포넌트가 존재, 다른 말로 붕어빵 틀이 존재한다면 

그 컴포넌트를 가지고 다양한 element, 붕어빵을 만들 수 있다.
다양한 붕어빵(element)를 만들 때, 필요한 것이 Props라는 것이며 이것은 속성이라는 뜻을 가진다.
붕어빵에 들어가는 재료들을 Props라고 이해하면 쉽다.
즉, component의 속성은 Props를 의미한다.

같은 붕어빵 틀(Component)에서 다양한 재료(Props)를 통해 그 재료에 맞는 붕어빵을 만들 수 있다.

예를 들어,
팥, 슈크림, 고구마 같은 것들을 통해 팥 붕어빵, 슈크림 붕어빵, 고구마 붕어빵과 같은 각각 다른 붕어빵들이 만들어진다.
하지만, 이러한 Props는 오직 읽기만 하고 바꿀 수 없다.
모든 React Components는 그들의 Props에 관해서는 Pure 함수(input과 output이 같은) 같은 역할을 해야 한다.
즉, Props를 직접 바꿀 수 없고, 같은 Props에 대해서는 항상 같은 결과를 보여줘야 한다.
붕어빵을 만들 때, 팥을 넣으면 팥 붕어빵이 되는 것과 같은 원리이다.

<Component 특징>

컴포넌트에는 2가지가 있다. 
바로 Function 컴포넌트와 Class 컴포넌트 이다.
먼저 Function 컴포넌트는 쉽게 말해서 자바스크립트 Function이라고 보면 된다.
class 컴포넌트는 React.Component를 상속받아서 쓰인다.
그리고 컴포넌트를 만들 때, 이름은 항상 대문자로 시작해야 한다.
왜냐하면, 소문자로 시작하면 리엑트에서 DOM 태그로 인식하기 때문에, 컴포넌트로 인식시키려면 대문자로 시작해야 한다. 
// const element = <div />;  -> HTML div 태그로 인식
// const element =  ​​<Weclome name="Sara" /> -> Welcome 이라는 React Component로 인식


큰 컴포넌트를 산산조각 내어서 여러 컴포넌트로 묶어야한다.
왜냐하면, 재사용 가능한 컴포넌트를 갖고 있으면 개발 속도가 빨라지기 때문이다.