Component

프로그래밍에 있어 재사용이 가능한 각각의 독립된 UI모듈이라고 했다.

Component를 이용하면..

• 재활용이 가능하다.
• 코드 유지보수에 용이하다.
• 코드 가독성이 높아진다.
• 컴포넌트 내 컴포넌트를 포함할 수 있다.

Class component

• ES6문법을 사용할 수 있다.
• componentWillMount 혹은 componentDidMount와 같은 lifecycle 메소드를 사용할 수 있다.
• class components는 react.Component에서 확장된다.
• props와 state 모두를 가지고 사용할 수 있으며, this 키워드를 사용하여 그들과 해당 컴포넌트 내에서 선언한 함수에 접근할 수 있다.

rernder()함수를 사용하고 JSX를 반환하는 형식을 갖는다.

import React from 'react'

class Component extends React.Component {
  render() {  //클래스형 컴포넌트에는 render 함수가 꼭 있어야 한다.
    return (
			<div>
				<h1>This is Class Component!</h1>
			</div>
		)
  }
}

export default Component

Functional component

• props에 접근하고 사용할 수 있지만 state는 가질 수 없다.
• lifecycle method를 사용할 수 없다. 따라서 UI에 집중하게 되고 app의 행동에는 크게 관여하지 않는다.
• this 키워드를 사용할 수 없다.

render함수를 사용할 필요 없고 보다 간략하게 컴포넌트를 선언할 수 있는 장점이 있다.

• 메모리 자원을 상대적으로 덜 사용한다.
• 컴포넌트 선언이 편하다.
• Hook 활용

최근엔 functional component를 더 선호하는 추세.

import React from 'react'

const Component = () => {
  return (
			<div>
				<h1>This is Functional Component!</h1>
			</div>
		)
};

export default Component

장단점

Functional component의 경우 state를 사용할 수 없다는 점, lifecycle method를 활용할 수 없다는 점, this 키워드를 사용할 수 없다는 점을 감안하면 아래와 같은 장점을 꼽을 수 있다.

1. Simplicity (그냥 심플)
   일단 functional component를 사용하게 되면 대부분의 환경에서 코드를 몇줄 정도 줄일 수 있다. 그리고 UI 구현에 집중하기 때문에 상대적으로 Bug를 빠르게 찾아내고 해결할 수 있다.

2. Testability (테스트 최적화)
   functional component는 side effect가 없기때문에 pure functions(순수함수) 라고 할 수 있다. 따라서 쉽게 테스트가 가능하다. 뭔가를 input하면 뭔가가 output 된다는 간결하고 직관적인 구조기 때문에 가능한 것이다.

3. Best Practice (최적의 프랙티스)
   Functional component는 중간중간 state를 즉흥적으로 사용할 수 없게 하고 최상위 컴포넌트에서 state를 관리하게끔 함으로써 간접적으로 best practice를 행하게 한다.

출처 : https://www.andreasreiterer.at/react-functional-components/