React에는 클래스형 component와 함수형 component, 2가지 component가 존재한다.
기본적인 React foundation 이기도 하고, 상황에 따라 class component 와 funtioncal component를 적절히 쓸 수 있도록 ..
Functional Component
함수형 컴포넌트로 시작해보자. 함수형 컴포넌트가 가지는 특징(혹은 클래스형 컴포넌트와의 차이점)은 아래와 같이 나열할 수 있겠다.
-
함수형 컴포넌트는 기본적으로 클래스형 컴포넌트의 render함수이다.
-
Props에 접근하고 사용할 수 있지만, state를 가질 수는 없다.
- lifecycle method를 사용할 수 없다. 따라서 UI에 집중하게 되고 app의 행동에는 크게 관여하지 않는다.
- this 키워드를 사용할 수 없다.
Class Component
- 클래스형 함수는 ES6문법을 백분 사용할 수 있다.
- 따라서 componentWillMount 혹은 componentDidMount와 같은lifecycle 메소드를 사용할 수 있다.
- class components는 React.Component에서 확장된다.
- props와 state 모두를 가지고 사용할 수 있으며, this 키워드를 사용해서 그들과 해당 컴포넌트 내에서 선언한 함수에 접근할 수 있다.
장단점
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/
