리액트) 컴포넌트

컴포넌트 (Component)

컴포넌트는 보통 '독립적인 기능을 수행하는 단위 모듈'을 의미한다.

소프트웨어의 재사용성을 높이고 유지보수를 용이하게 하기 위해 모듈화 시켜서 개발을 할 때 자주 쓰인다.

 

리액트에서 컴포넌트는 '앱을 이루는 최소한의 단위' 이다.

 

리액트는 UI를 만들기 위한 JavaScipt 라이브러리이므로, UI를 이루는 최소한의 단위란 html 태그를 의미한다.

개발자가 커스텀해서 만든 html 태그라고 이해하면 쉽다. 그러한 컴포넌트들을 조합하여 화면을 구성한다.

 

Props 

Properties 의 줄임말이라고 한다.

부모 컴포넌트에서 자식 컴포넌트에게 넘겨주는 값이며, 객체 형태이다.

자식 컴포넌트에서는 Props 값을 변경해선 안된다. 즉, 읽기 전용이다.

 

State

컴포넌트의 독자적인 값이다. 컴포넌트 내부에서 생성하며 변경 가능한 데이터를 관리할 때 사용한다. 

 

리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 State, Life Cycle 등이 없었고 클래스형 컴포넌트에서만 다룰 수 있었다. 리액트 16.8부터 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 비슷한 작업을 할 수 있게 되었다.

 

현재 리액트에서 공식 권장하는 방식은 함수형 컴포넌트 + Hooks 이다. 

 

 

함수형 컴포넌트 (Stateless Functional Component)

자바스크립트 함수를 작성하여 컴포넌트를 정의하는 방법이다.

 

import React from 'react';

function MyComponent(props) {
	return (
    	<>
        <div>Hello, {props.name}</div>
        <div>Your ID is {props.id}</div>
        </>
    );
}

//export를 해주어야 다른 js파일에서 import해서 정상적으로 쓸 수 있다.
export default MyComponent;

 

클래스형 컴포넌트 (Class Component)

Props, State, Life Cycle (생명주기) 모두 포함하고 있다. 

 

import React from 'react';

class MyComponet extends React.Component {
	constructor(props) {
    	super(props);
    }
    
    // 상속 받은 생명주기 함수들. 이 외에도 여러가지가 있다.
    componentWillMount() {}
    componentDidMount() {}
    componentDidUpdate(prevProps, prevState) {}
    componentWillUnmount() {}
    
    // 클래스형 컴포넌트에서 render 함수는 필수로 구현해야한다.
    render() {
    	return(
        <>
        <div>Hello, {this.props.name}</div>
        <div>Your ID is {this.props.id}</div>
        </>
        );
    }
}

export default MyComponent;

 

참고 출처

https://goddaehee.tistory.com/299

[React] 4. React 컴포넌트(1) - 컴포넌트란?