React : 컴포넌트(Component)란 ?

JavaScript에서 기능을 캡슐화 시켜서 재사용이 가능한 하나의 커스텀 엘리먼트를 생성하여 웹에서 활용할 수 있도록 하는 웹 컴포넌트에 대해 공부한 적이 있다. React의 컴포넌트는 사용자 인터페이스를 구성하는 독립적이고 재사용이 가능한  React의 기본 단위이다. 임의의 데이터(props)를 입력 받은 후 정해진 출력을 시행한다.

 

컴포넌트 작성법

• 컴포넌트 이름은 항상 대문자로 시작한다. (React는 소문자로 시작하는 컴포넌트를 DOM태그로 취급)
• PascalCase로 작성한다. 
• 컴포넌트 사용 시에 한 개의 파일에는 가급적 하나의 컴포넌트를 넣어 사용한다.
• 파일의 이름과 컴포넌트 이름을 동기화 시키는 것을 권장한다.

1. src에 components 폴더를 생성한다. 
2. components에 컴포넌트 파일을 생성한다. vite의 경우 확장자를 .jsx를 사용해야 한다.
3. 컴포넌트 파일의 이름과 컴포넌트의 이름을 동기화 시켜, JavaScript의 함수를 기반( function 컴포넌트이름() {  return( JSX내용 ) }  )으로 컴포넌트를 작성한다.
4. 컴포넌트 작성 후에 export default 컴포넌트이름; 을 통해 해당 컴포넌트를 다른 파일에서 사용할 수 있도록 한다.
5. 해당 컴포넌트를 사용할 파일에 import 컴포넌트이름 from './components/컴포넌트이름'으로 불러오고, <컴포넌트이름/>을 통해서 렌더링 한다. 
   
   

컴포넌트 종류

컴포넌트의 경우 크게 함수형 컴포넌트(Function Component)와 클래스형 컴포넌트(Class Component)로 나뉜다. 

 

함수형 컴포넌트(Function Component)

 함수형 컴포넌트는 JavaScript의 함수를 기반으로 하여 데이터를 가진 "props" 객체 인자를 받아 JSX(JavaScript XML)을 반환한다.

function Comp1({props}){
    return(
        <h1> 안녕하세요. {props.name} </h1>
    )
}

export default Comp1;

 

클래스 컴포넌트(Class Component)

 클래스 컴포넌트는 JavaScript의 클래스를 기반으로 하여, 컴포넌트를 class로 정의하고 render() 함수에서 this.props로 객체 인자를 받아 JSX를 반환한다. 

import React, { Component } from 'react';

class Comp1 extends React.Component {
    render() {
        return <h1>안녕하세요, {this.props.name}</h1>;
    }
}

export default Comp1;

 

컴포넌트의 주요 개념

Props(속성)

부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터로 단방향 데이터 흐름을 갖는다. 하위 컴포넌트의 경우 props를 수정할 수 없다(읽기 전용).

 

State(상태)

컴포넌트 내부에서 관리되는 데이터로 컴포넌트의 상태가 변경되면 컴포넌트가 다시 랜더링된다. 클래스형 컴포넌트에서는 this.state, 함수형 컴포넌트에서는 useState를 통해 관리한다. 

 

Lifecycle Methods (생명주기 메서드)

컴포넌트의 생성, 업데이트, 제거 시점에서 호출되는 메서드로 주로 클래스형 컴포넌트에서 사용된다. 

 

Hooks(훅)

함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 React 기능이다. useState, useEffect, useContext 등이 있다.