React - functional vs Class

React의 component는  functional과 class 각각 사용할 수 있지만 차이점이 있다.

가장 큰 차이점은 State의 사용여부 이다. functional은 State, life cycle를 사용할 수 없지만, class에서는 State를 사용할 수 있다. 만약 State를 변경하거나 초기에 State를 가져야 한다면 class를 사용해서 component를 만들어야 한다.

그래서 class가 functional에 비해 기능적으로 더 많은 것을 제공하는 것처럼 보이지만, Hooks라는 개념이 있어서 그렇지 않다고 한다.(아직 Hooks를 몰라서...)

 

functional 형태

const App = () => (
  <div>
    <Nav />
    <div className="col-md-7">
      <VideoPlayer/>
    </div>
    <div className="col-md-5">
      <VideoList videos={fakeData}/>
    </div>
  </div>
);

 

Class 형태

class App extends Component{
  constructor(){
    super()
  }

  render() {
    return (
      <div>
        <Nav />
        <div className="col-md-7">
          <VideoPlayer />
        </div>
        <div className="col-md-5">
          <VideoList />
        </div>
      </div>
    )
  }
}

 

위의 두 코드는 같은 기능을 하는 코드이다. 하지만 class에는 state를 추가 할 수 있다는 장점이 있다.

class App extends Component{
  constructor(){
    super()
    this.state={
      currentVideo: fakeData[0],
      video: fakeData
    }
  }

  render() {
    return (
      <div>
        <Nav />
        <div className="col-md-7">
          <VideoPlayer />
        </div>
        <div className="col-md-5">
          <VideoList />
        </div>
      </div>
    )
  }
}

 

아래 참조 글에서 function과 class의 차이점을 자세히 확인할 수 있다.

가장 큰 차이점은 function은 렌더링 값을 고정시킨다는 것이다. function은 this가 유지되는 반면 class는 유지가 되지 않기 때문에 bind를 사용해서 this를 묶어서 사용해야한다. 라는 설명이 되어 있다.

 

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

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

 

 #React#codestates#function#class#state#lifecycle#hooks#this#bind