React - 컴포넌트란?

bkboy·2022년 7월 11일

웹 개발

목록 보기

13/26

컴포넌트(Component)

컴포넌트는 리액트에서 앱을 이루는 최소한의 단위이다. 리액트로 만든 앱은 여러개의 컴포넌트로 구성을 이룬다.

네이버 페이지의 뉴스스탠드 부분이다. 뉴스, 신문사 하나하나 같은 모양과 형태로 이루어져있다. 컴포넌트를 하나 만들어 안에 내용을 바꿔 여러개를 화면에 띄워둔 것으로 해석할 수 있다. (리액트로 만들었다면 그랬을 것이라는 것! 실제로 리액트로 만든진 모르겠다!)

컴포넌트의 종류

1. 함수형 컴포넌트

function App() {
  retrun (
  	// jsx  
  )
}

2. 클래스형 컴포넌트

import React, { Component } from 'react'

class App extends Component{ 	
  render() {     	
    return ( 
      	// jsx            
    	); 	
   } 
}

3. 차이

선언 방식부터 차이가 있다. 클래스 컴포넌트는 class 키워드가 필수로 들어가며 Component로 상속을 받아야하고 render 메서드가 반드시 있어야한다. 그리고 클래스형 컴포넌트와 달리 함수형 컴포넌트는 state, lifeCycle 관련 기능사용이 불가능하고 메모리 자원을 덜 사용한다. lifeCycle 수명 주기에 관해서는 다음 글로 정리하려고 한다.

함수형 컴포넌트에서 state는 리액트 훅을 이용해 사용할 수 있어서 함수형 컴포넌트를 사용하는 추세이다.(대부분의 영상이나 강의에서도 함수형 컴포넌트로 설명을 한다.)

후에 필요하다면 클래스형 컴포넌트 내용을 추가할 생각이다.

컴포넌트의 합성

컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있다. 리액트 앱에서는 버튼, 폼, 화면 등 모든 것들이 컴포넌트로 표현이 된다.

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

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

공식 문서에 가져온 코드이다. 관련 글 링크를 남기겠다. 링크

App 즉, 메인이 되는 컴포넌트에 Welcome 컴포넌트가 3개가 들어가 있고 DOM에서 id root인 태그를 찾아 그 위치에 렌더링 해주는 코드이다.

props라는 것이 나오는데 properties의 약자로 속성으로 값을 넘기고 그것을 컴포넌트 내에서 활용하는 것이다. 객체로 넘어가기 때문에 Welcome 컴포넌트에서 props.name의 형태로 입력한 것이다. props는 받은 컴포넌트 내에서는 수정 할 수 없지만 사실 state로 만들어 수정할 수 있긴하다. 나중에 더 리액트 훅을 다루는 글에서 기술할 예정이다.