[React Basic] 컴포넌트 만들기

게시글은 리액트 공부용이며 출처를 제시합니다.
출처: 소플의 처음 만난 React, 리액드를 다루는 기술, 모던 자바스크립트 deep dive

⛳ 컴포넌트의 종류

클래스 컴포넌트

리액트 초기 버전에서는 클래스 컴포넌트를 주로 사용했지만 사용하기 불편하다는 의견으로 함수 컴포넌트를 개선해서 주로 사용하고 있다.

함수 컴포넌트

함수 컴포넌트를 개선하는 과정에서 개발된 것이 Hook이다.
현재 리액트에서는 거의 Hook을 사용하고 있다.

하지만 클래스 컴포넌트에 대해 공부하지 않고 넘어가는 것은 추천하지 않는다.
리액트의 기초를 탄탄하게 다지려면 클래스 컴포넌트와 컴포넌트의 생명주기에 대해 잘 이해하고 있어야 하기 때문이다.

---

⛳ 함수 컴포넌트

pure 함수와 같은 역할을 하는 컴포넌트는 일종의 함수라고 생각하면 된다.

function Welcome(props){
	return <h1>안녕, {props.name}</h1>;
}

• Welcome이라는 이름을 가진 함수

• props 객체를 받아서 인사말이 담긴 리액트 엘리먼트를 리턴하기에 리액터 컴포넌트라고 할 수 있다.

---

⛳ 클래스 컴포넌트

자바스크립트의 class라는 것을 사용해 만들어진 형태의 컴포넌트

class Welcome extends Component{
	render(){
    	return <h1>안녕, {props.name}</h1>;
    }
}

• 함수 컴포넌트와 가장 큰 차이는 리액트의 모든 클래스 컴포넌트는 React.Component를 상속 받아서 만든다.

• OOP의 개념으로 한 클래스의 변수들과 함수들을 상속받아서 새로운 자식 클래스를 만드는 방법이다.

---

⛳ 컴포넌트 이름 짓기

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

소문자로 시작하는 컴포넌트를 DOM 태그로 인식하기 때문이다.

HOW?
<div>, <span>과 같이 사용하는 것은 내장 컴포넌트라는 것을 뜻하며
div나 span 과 같은 문자열 형태로 React.createElement()에 전달된다.

하지만 <Foo />와 같이 대문자로 시작하는 경우에는 React.createElement(Foo)의 형태로 컴파일되며 자바스크립트 파일 내에서 사용자가 정의했거나 import한 컴포넌트를 가리킨다.

---

⛳ 컴포넌트 렌더링

컴포넌트라는 붕어빵 틀을 통해 찍어져서 나온 엘리먼트라는 붕어빵이 실제로 화면에 보이게 되는 것이다.

function Welcome(props){
	return <h1>안녕, {props.name}</h1>;
}

//위의 함수가 엘리먼트로 만들어지기 위해서 함수를 호출하고 객체로 변환
const element = <Welcome name="joah">;
React.DOM.render(
	element,
  	document.getElementById('root')
);

• Welcome이라는 함수 컴포넌트

• <Welcome name="joah">이 엘리먼트를 파라미터로 React.DOM.render()를 호출

• Welcome 컴포넌트에 {name: "joah}라는 props를 넣어서 호출하고 그 결과로 리액트 엘리먼트가 생성

• 이렇게 생성된 엘리먼트는 최종적으로 React DOM을 통해 실제 DOM에 효과적으로 업데이트 되고 브라우저를 통해서 볼 수 있다.