[React] Component 와 State

1. 컴포넌트(Component)란?

- React로 만들어진 앱을 이루는 최소단위

- 데이터(props)를 입력받아 View(state)상태에 따라 DOM Node를 출력하는 함수

- Component 이름은 항상 대문자로 시작

- UI 또는 기능을 부품화 해서 재사용 가능하게 하는 것

- 페이지도 하나의 큰 Component 가 될 수 있다

- 함수형과 클래스형 두가지가 있다

 

Component 예시

 

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

- 가장 간단하게 컴포넌트를 정의하는 방법은 자바스크립트 함수를 작성하는 것이다

- 사용하기 더 쉽기 때문에 주로 함수형을 사용한다

export default function MyFunction() {
	//JavaScrip 작성

    return(
    	<div>함수형 컴포넌트 입니다.</div>
    )
}

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

- 컴포넌트 구성요소, 리액트 생명주기를 모두 포함

- 프로퍼티, state, 생명주기 함수가 필요한 구조의 컴포넌트를 만들 때 사용

- 함수형으로 처리하지 못하는 작업을 클래스형 컴포넌트를 사용해 처리함

import {Component} from "react";

class New extends Component{
	render() {
    	return(
        	<div>클래스형 컴포넌트 입니다.</div>
        )
    }
}