[React] - [처음 만난 리액트] - 16. Component 생성 및 렌더링(컴포넌트, 컴포넌트 생성 시 주의사항)

🧹 두서없이 적는 쉬운 정리

1. 함수 컴포넌트는 정말 함수처럼 생겼다.

2. 리액트 컴포넌트는  클래스 컴포넌트와 함수 컴포넌트로 나뉜다.

3.  모든 클래스 컴포넌트는 React.Component를 상속받아서 만든다.

4.  컴포넌트 생성 시 첫 글자는 대문자여야 한다.(소문자는 HTML 태그로 인식됨)

5.  이렇게 만들어진 컴포넌트는 엘리먼트를 출력하고 렌더링을 통해 브라우저에 보이게 된다.

 

(자세한 내용은 아래 참고)

 

 

---

🎅🏻 Components의 역사

리액트 컴포넌트는 아래 그림처럼 크게 클래스 컴포넌트와 함수 컴포넌트로 나뉜다.

초기 버전에는 클래스 컴퍼넌트를 주로 사용하였다.

하지만 클래스 컴포넌트가 사용하기 불편하다는 의견이 많이 나와

함수 컴포넌트를 주로 사용하게 되었다.

 

함수 컴포넌트를 개선하는 과정에서 개발된 것이 바로 Hook이다.(추후 설명)

 

🤷🏻 함수 컴포넌트란?

Props 설명 당시 모든 리액트 컴포넌트는 pure 함수 같은 역할을 해야 한다고 했다.

결국 컴포넌트를 일종의 함수라고 생각한다는 뜻.

위 코드에 Welcome 이라는 함수는 하나의 props 객체를 받아

인사말이 담긴 리액트 엘리먼트를 리턴하기 때문에 리액트 컴포넌트라고 할 수 있다.

 

그리고 이렇게 생긴 것을 우리는 함수 컴포넌트라고 부른다.

함수 컴포넌트는 이처럼 간단한 코드가 장점이다.

 

🧱 클래스 컴포넌트

함수 컴포넌트의 비해서 몇 가지 추가적인 기능을 갖고 있다.(추후 설명)

우측 코드 좌측 함수 컴포넌트 Welcome 동일한 역할인 클래스 컴포넌트이다.

 

가장 큰 차이점은 모든 클래스 컴포넌트는 React.Component를 상속받아서 만든다.

 

React.Component라는 클래스를 상속 받아 Welcome이라는 클래스를 만들었고

이는 React.Component 를 상속받았기 때문에 결과적으로 리액트 컴포넌트가 되는 것이다.

 

 

⚠️ 컴포넌트 생성 시 주의 사항

컴포넌트 의 이름은 항상 대문자로 시작해야 된다.

리액트는 소문자로 시작하는 컴포넌트를 DOM 태그 <>으로 인식하기 때문)

 

 

📺  렌더링이 필요하다

컴포넌트는 붕어빵 툴의 역할이다. 붕어빵이 엘리먼트 즉 화면에 보이는 역할

그렇다면 렌더링을 위해서는 가장 먼저 컴포넌트로부터 엘리먼트를 만들어야 된다.

이 두 줄의 코드는 모두 엘리먼트를 만들어내게 된다

그러면 우리는 이제 이 엘리먼트를 렌더링 하면 되는 것.

 

🧑🏻‍💻 실제 렌더링 하는 코드

 위 코드에서는 먼저 Welcome 이라는 함수 컴포넌트를 선언하고 있다.

 그리고 Welcome name = "인재"라는인재" 라는 값을 가진 element(변수)를 파라미터로 해서 ReactDOM.reder() 함수를 호출한다.

 

이렇게 하면 리액트는 Welcome 컴포넌트의  name = "인재"라는 props를 넣어서 호출하고

그 결과로 리엑터 엘리먼트가 생성된다.

 

이렇게 생성된 엘리먼트는 최종적으로 우리가 브라우저를 통해서 볼 수 있게 된다.

 

 

 

 

 

 

위 내용은 '소플' 님의 '처음 만난 리액트' 영상을 참고하여 작성되었습니다.