[React] component 만들기

리액트에서 컴포넌트는 뷰의 단위이다. 우리가 리액트로 모든 것은 컴포넌트로 이루어져있으며 필요에 의해서 이 컴포넌트를 화면에서 제거 혹은 연결 하여 페이지를 구성한다. 

 

컴포넌트는 함수형 컴포넌트 , 클래스형 컴포넌트를 가지는데 react-hook 이라는 라이브러리가 나오기전까지 함수형 컴포넌트는 스스로 상태를 가지지 못하여 잘 사용되지 못했지만 최근 함수형 프로그램의 우수성과 react-hook의 등장으로 인하여 많이 사용되고 있다.  

 

해당 포스팅에서는 클래스형 컴포넌트와 함수형 컴포넌트의 작성 형태를 설명하고 컴포넌트의 life-cycle 같은 내용들은 추후 따로 포스팅 할 예정이다.

클래스형 컴포넌트

 

클래스형 컴포넌트는 React.component 를 상속받아서 사용하여야 한다. component 프로퍼티는 'react' 에서 export 되었기 때문에 

import React , {component} from 'react'; 로 작성하면 사용 가능한다.

 

class App extends React.Component{
  state = {
  	contents : "happy react"
  }
  render(){
    return (
      <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          ${this.state.contents}
        </a>
      </header>
    </div>
      )
    }
}

 

 클래스형 컴포넌트의 경우 상태를 직접 가질 수 있다는 특징이있으며 클래스내부에 작성된 렌더 함수는 react component 를 만들어 주는 역할을 한다. 렌더 함수내부에 return 문 안에서는 JXS문법으로 컴포넌트에서 보여질 뷰를 작성하면 된다. 

함수형 컴포넌트

 

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

 

정리하며 

함수형 컴포넌트와 클래스형 컴포넌트는 서로 비슷해 보이지만 render됬을 때 해당 state나 props가 변환여부이다. 이에 대해서 한 블로거가 잘 작성해놨으니 한번 참조 하는 것도 좋을 듯하다. 

 

https://overreacted.io/ko/how-are-function-components-different-from-classes/

함수형 컴포넌트와 클래스, 어떤 차이가 존재할까?