[React] 리액트의 꽃, 컴포넌트와 그 구성 요소

컴포넌트와 구성요소

컴포넌트의 개념

기존의 웹 프레임워크는 MVC 방식으로 정보, 화면, 구동 코드를 분리하여 관리했다. 정보 담당의 모델(Model), 화면 담당의 뷰(View), 구동 담당의 컨트롤러(Controller)로 구성되어 있다. 이 방식은 코드 관리를 효율적으로 할 수 있지만 MVC 각 요소의 의존성이 높아 재활용이 어렵다. 이점을 개선한 것이 바로 컴포넌트로 MVC의 뷰를 독립적으로 구성하여 재사용도 할 수 있고 컴포넌트를 통해 새로운 컴포넌트를 쉽게 만들 수도 있다. (코드관리, 코드 재사용 유용함.) 간단하게 컴포넌트는 다양한 모양의 블록을 조립하는 것과 같다.

 

 

컴포넌트 구성 요소

• 프로퍼티( property ) : 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터
• 스테이트( state ) : 컴포넌트의 상태를 저장하고 변경할 수 있는 데이터 (cf. 지역 변수)
• 컨텍스트( context ) : 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터

간단한 컴포넌트 추가하는 예제

src 폴더에 03 이라는 폴더 안에 TodaysPlan.jsx의 파일을 만들어서 TodaysPlan 컴포넌트 생성

// 파일 : 03/TodaysPlan.jsx
import React from 'react';

class TodaysPlan extends React.component {
    render() {
        return (
            <div> 놀러가자 </div>
        );
    }
}
export default TodaysPlan;

src의 App.js 파일로 App 컴포넌트에 TodaysPlan 컴포넌트를 추가

import React from 'react';
import TodaysPlan from "./03/TodaysPlan";

class App extends React.Component {
    render(){
    	return (
            <div>
            	<TodaysPlan />
            </div>
        );
    }
}
export default App;

⚠️ 여기서 중요한 점은 컴포넌트의 이름은 항상 대문자로 처리한다. (리액트 엔진은 소문자로 시작하는 컴포넌트를 DOM 태그로 처리한다.)

vscode의 Reactjs code snippet 확장 프로그램을 이용한 컴포넌트 생성 단축 키워드

해당 키워드를 입력하고 tab 키를 누르면 된다.

• rcc : 기본 리액트 컴포넌트를 생성한다. (클래스형 컴포넌트 코드)
• rccp : 리액트 컴포넌트를 프로퍼티 타입과 함께 생성한다. (클래스형 컴포넌트 코드)
• rcfc : 리액트 컴포넌트를 생명주기 함수와 함께 생성한다. (클래스형 컴포넌트 코드)
• rpc : 리액트 퓨어 컴포넌트를 생성한다. (클래스형 퓨어 컴포넌트 코드)
• rsc : 함수형 컴포넌트를 생성한다.(함수형 컴포넌트 코드)
• rscp : 함수형 컴포넌트를 프로퍼티 타입과 함께 생성한다. (함수형 컴포넌트 코드)
• rsf : 스테이트가 없는 function 형태의 컴포넌트를 생성한다. (기본 형태)
• rsfp : 스테이트가 없는 function 형태의 컴포넌트를 프로퍼티 타입과 함께 생성한다. (기본 형태) 

더 많은 키워드는 https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets참고

Reactjs code snippets - Visual Studio Marketplace

 

* 출처 : do it! 리액트 프로그래밍 정석 chapter 3