리액트 | 컴포넌트

html의 컴포넌트

EX) body -> form -> input

 

리액트의 컴포넌트의 형태 (Tree구조)

App/ -> app.js 최상위 컴포넌트 딱 1개만 있어야함

수정시 리랜더링을 하지 않으려고 나눔

 

https://goddaehee.tistory.com/299

리액트 컴포넌트

- 리액트로 만들어진 앱을 이루는 최소한의 단위

- 기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다.

   반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다.
- 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수.
- 컴포넌트 이름은 항상 대문자로 시작하도록 한다. 
   (리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문이다.

- UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다.

 - “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

 - props와 state 등의 특징들은 따로 정리 하도록 한다.

 

컴포넌트 선언방법 (종류)

리액트에서 정의하는 컴포넌트 종류는 크게 함수형 컴포넌트, 클래스 컴포넌트 2가지가 있다. 책 87p에 있음

컴포넌트는 여러개일 수 있다.

 

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

- 가장 간단하게 컴포넌트를 정의하는 방법이다.

 

모듈 내보내기 (export)

export default 이름;

모듈 불러오기 (import)

import 이름 from './MyComponent';

 

 

MyComponent.js

const MyComponent = () => {
    return(
        <div>MyComponent1</div>
    )
}

export default MyComponent;

MyComponent2.js

const MyComponent2 = () => {
    return (
        <div>MyComponent2</div>
    )
}

export default MyComponent2;

MyComponent3.js

const MyComponent3 = () => {
    return (
        <div>MyComponent3</div>
    )
}

export default MyComponent3;

App.js

import { Fragment } from "react";
import MyComponent from "./component/MyComponent";
import MyComponent2 from "./component/MyComponent2";
import MyComponent3 from "./component/MyComponent3";

const App = () => {

  return (
    <Fragment>
      <MyComponent/>
      <MyComponent2/>
      <MyComponent3/>
    </Fragment>
  )

}

export default App;

 

결과

 

클래스형 컴포넌트 

클래스형 컴포넌트는 render함수안에서 return을 작성

MyComponent3.js

import { Component } from "react";


class MyComponent3 extends Component {
    //클래스형 컴포넌트는 render함수안에서 return을 작성
    render() {

        let {name} = this.props;//props
        console.log(name);
        return (
			<div>나의 클래스형 컴포넌트</div>
        )
    }
}

export default MyComponent3;