[React] 컴포넌트

parkheeddong·2023년 5월 9일

목록 보기

4/13

React 컴포넌트는 함수 컴포넌트와 클래스 컴포넌트로 구분된다.

1. Function Component

모든 리액트 컴포넌트는 Pure 함수같은 역할을 해야한다. 즉 리액트 컴포넌트는 일종의 함수라고 생각해야 한다.

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

Welcome 함수는 props를 받아 element를 리턴하기 때문에, React Component이며 함수 Component이다.

2. Class Component

Class Component는 React.Component 클래스를 상속 받아서 만든다.

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

📌 Component 이름 주의점

항상 대문자로 시작해야 한다 ❗❗

React는 소문자로 시작하는 컴포넌트는 "DOM 태그"로 인식한다.
div, span 등은 내장 컴포넌트로서 문자열 형태로 react.createElement에 전달된다.
const element = <div/> ; // HTML div 태그로 인식

React는 대문자로 시작하는 컴포넌트를 리액트 Component로 인식한다. 즉 자바스크립트로 사용자가 정의한 컴포넌트으로 인식된다.
const element = <Welcome name = '인재' />;

3. 컴포넌트 렌더링

Element가 붕어빵이라면, Component는 Element를 찍어내는 붕어빵 틀의 역할을 한다.

따라서 컴포넌트 자체가 화면에 렌더링되는 것은 아니다. 컴포넌트를 통해 찍어져 나온 element가 렌더링되는 것이다.

컴포넌트를 통해 Element를 만들어 보자

(1) DOM 태그를 사용한 element

const element = <div/> ;

(2) 사용자가 정의한 Component를 사용한 element

const element = <Welcome name = '인재' />;

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

const element = <Welcome name = '인재' />;
ReactDOM.render(
	element,
    document.getElementById('root')
);

Welcome 컴포넌트를 통해 React Element가 생성되고, 렌더링 된다.

4. 컴포넌트 합성

여러개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것

리액트는 컴포넌트 안에 또 다른 컴포넌트를 쓸 수 있다.
이를 통해 복잡한 화면을 여러개의 컴포넌트로 나누어 구현 가능하다.

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

function App(props){
  return(
    <div>
      <Welcome name="Mike" />
      <Welcome name="Steve" />
      <Welcome name="Jane" />
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);