React class vs function

React.js에서 하나의 js파일을 export할때 크게 class와 function으로 할 수 있어요

 

그렇다면 Class와 Function의 주요한 차이는 뭘까요??

 

Class 는 render라는 메소드가 필요하고

Function은 자기자신이 렌더 함수예요

react class export

react function export

또한 props는 class function 둘다가능하지만

state는 class에서만 사용 가능해요.

(최근엔 hook이라는 새로운 기능을 사용하면 function에서도 state이용 가능하기도 하죠.)

 

class에서 

constructor(props) {

    super(props);

    this.state = ''

}

로 prop을 받아오지만

function에서는

react가 함수를 호출할 때 첫 번째 파라미터의 인자 값을 props값으로 전달하도록 약속되어있어요.

 

 

class에서는 lifecycle에 따라 원하는 타이밍에 정해진 이름의 메소드를 호출함으로써 적당한 타이밍에 원하는 코드 실행 가능하여 큰 장점이었지만 hook이 도입됨에 따라 function에서도 lifecycle을 사용이 가능해졌습니다.

 

React component lifecycle

Lifecycle의 대략적 순서는

 

constructor

componentWillMount

Render

componentDidMount( 컴포넌트가 모두 구성된 직후인 여기에 함수 API를 호출하면 효과적)

     => 처음 component를 호출할 때 시행됨(마운팅, 컴포넌트 객체가 DOM에 실제로 삽입되기 전까지의 과정)

shouldComponentUpdate

componentWillUpdate

render(화면 재구성)

componentDidUpdate

     => state값이 바뀔 때 다시 호출되면서 설정됨

componentWillUnmount

     => 컴포넌트가 마운팅 해체될 때 수행하는 함수. 컴포넌트의 동작을 위해 사용되었던 메소드들의 리소스를 제거(성능 향상 목적)

 

글만 보면 느낌이 잘 안 오니 그림을 참고해주시면 좋을 듯해요

 

 

정리하자면...

Hook이 도입되기 전까지는 Class와 Function의 차이는 function이 state를 쓸 수 없었고 Lifecycle에 따른 정교한 메소드 호출이 불가능하였지만 Hook이 도입되고나서부터는 Class와 Function의 차이가 많이 없어지고 있습니다.

Class의 많은 기능을 사용할 수 있도록 Hook이 도입되고 나서는 Function을 쓰는 빈도가 많이 늘어났다고 해요.

저는 개인적으로는 Class를 많이 쓰기는 하지만 편하신 것을 쓰면 될 것 같아요.

 

그럼 계속 Hook을 말했는데 Hook은 무엇인지 다음 시간에 알아보도록 하겠습니다.

 

cnwnsdms.tistory.com/entry/React-HookuseState

React Hook(useState)

 

 

- 이 노트는 생활코딩의 유튜브 강의를 통해 배운 내용을 정리한 것입니다.

- 초보 개발자라 부족한 점이 아직 많습니다. 다른 의견이 있으시다면 자유롭게 남겨주세요.

- 처음 접하시는 분께는 다소 어려울 수 있지만 어느 정도 개념이 잡히신 분께 도움이 되었으면 하는 바람에서 작성된 글입니다.