(React) 2. 컴포넌트

React 의 구성에서 뼈대를 담당하는 컴포넌트에 대해 정리해보고자 한다.

• 23.04.09 수업 내용중..

컴포넌트(Component) 란?

리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위를 사용한다.
앱/웹을 이루는 가장 작은 조각이라고 할 수 있습니다.
리액트의 중요한 핵심인 '컴포넌트'는 함수 컴포넌트, 클래스 컴포넌트 2가지 방법으로 사용할 수 있다.

컴포넌트 구성요소

1) property(props)

• 부모 컴포넌트에서 자식 컴포넌트에 전달되는 데이터(읽기 전용)입니다.
  프로퍼티값은 자식 컴포넌트에서 수정할 수 없습니다.

2) state

• 컴포넌트의 상태를 저장하고 수정 가능한 데이터입니다.

3) context

• 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에게 전달하는 데이터입니다.

Reactjs code snippets
: VS Code의 경우 해당 라이브러리를 사용하면 정형화 되있는 형식의 컴포넌트들을 간단한 명령어로 생성할 수 있습니다.

Reactjs code snippets 단축키

값	의미
rcc	클래스 컴포넌트 생성
rrc	클래스 컴포넌트와 react-redux 리덕스를 연결하여 생성
rcjc	import와 export 없이 클래스 컴포넌트 생성
rwwd	import 없이 클래스 컴포넌트 생성
rsc	=> 함수형 컴포넌트 생성
rsf	함수형 컴포넌트 생성

Class형 컴포넌트

: class로 정의하고 render() 함수에서 jsx 코드를 반환합니다.

import React, { Component } from 'react';

class class extends Component {
    render() {
        return (
            <div>
                
            </div>
        );
    }
}

export default class;

Function형 컴포넌트

: function 으로 정의하고 return 문에 jsx 코드를 반환합니다.

밑의 예시 코드와 같이 화살표 함수도 사용하여 표현할 수 있습니다.

• 화살표 함수

import React from 'react';

const class = () => {
    return (
        <div>
            
        </div>
    );
};

export default class;

• 일반 함수

import React from 'react';

function class(props) {
    return (
        <div>
            
        </div>
    );
}

export default class;

참조

react 공식문서