react component

1. 컴포넌트란?

"독립적인 기능을 수행하는 단위 모듈"

소프트웨어의 재사용성을 높이고 유지보수를 용이하게 하기 위해 나온 기술

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

여러개의 컴포넌트가 모여 하나의 앱을 구성

 

2. 함수 컴포넌트와 클래스 컴포넌트

함수

import React from "react";

function SecondComponent(){
    return <h1>SecondComponent</h1>
}

export default SecondComponent;

 

클래스

import {Component} from 'react';

class FirstComponent extends Component{
    render(){
        return(
            <h1>FirstComponent</h1>
        )
    }
}

export default FirstComponent;

 

컴포넌트 합성

import './App.css';
import FirstComponent from './components/firstComponent';
import SecondComponent from './components/secondComponent';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>React Study</h1>
        <FirstComponent/>
        <SecondComponent />
      </header>
    </div>
  );
}

export default App;

여러개의 컴포넌트를  사용 가능!

hook이 나온 이후로 함수 컴포넌트를 더 많이 이용하는듯

클래스 컴포넌트로도 코드를 작성해보자

 

 

 

 

3. 컴포넌트 props는 수정 불가

state를 이용하여 사용자의 액션 및 응답 요소에 따른 값을 변경한다.