[React]Component

Component란?

리액트를 웹페이지를 만들기위한 하나의 레고라고 생각할때, 컴포넌트는 레고의 블록이라고 생각하자.
한 웹 페이지의 부분부분을 기능 및 역할에 따라 조각낼 때, 나눈 조각 하나하나를 컴포넌트라고 부른다.
즉, "Component는 웹 사이트의 조각이고, 우리는 이 조각을 모아서 웹사이트에 뿌려준다" 라고 생각하면 된다.
클래스형 컴포넌트, 함수형 컴포넌트가 있으며 React 버전 16.8부터 추가된 React Hook의 사용이 권장되며 함수형 컴포넌트로 구성하는 것또한 권장된다.

컴포넌트 속 State와 Props

Component에서 데이터 관리를 하기 위해 State와 Props를 사용한다.

state는 한 Component 속에서만 가지고 있는 데이터이며
해당 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 생성, 수정할 수 있다.
즉, 생성도 수정도 오직 해당 컴포넌트 내에서만 이뤄진다.

props는 Component가 부모 Component로부터 받아온 데이터이다.
다시 말해, 부모 컴포넌트로부터 전달 받은 데이터를 props라고하며
props로 받은 데이터는 수정할 수 없고 읽기전용으로 사용된다.
부모 컴포넌트에서 자식 컴포넌트 포함시 부모 컴포넌트의 state를 props로 선언해주며 데이터를 넘겨주는 형식을 갖는다.

<자식컴포넌트 자식컴포넌트에서사용할_props변수={넘길_데이터}/>

함수형 Component

import React from 'react';

// 첫번째 방식
function FuncComponent(props){
  return ( <div>element</div> );
}

// 두번째 방식
const FuncComponent = (props) => {
  return ( <div>element</div> );
}

export default FuncComponent;

클래스형 Component

import React from 'react';

class ClassComponent extends React.Component {
  constructor(props){
    super(props);
    // App 컴포넌트의 state를 정의해줍니다.
    this.state = { a:b };
  }
  render() {
    return ( <div>element</div> );
  }
}

export default ClassComponent;