React에는 클래스형 component와 함수형 component, 2가지 component가 존재한다.
기본적인 React foundation 이기도 하고 , 상황에 따라 class component와 funtioncal component 를 적재적소에 사용하면 내 코드의 효율을 최대로 끌어올릴 수 있으니 한번 알아보는 시간을 가지자 .
function Component
함수형 컴포넌트로 시작해보자 . 함수형 컴포넌트가 가지는 특징 (혹은 클래스형 컴포넌트와의 차이점)은 아래와 같이 나열할 수 있겠다.
- 함수형 컴포넌트는 기본적으로 클래스형 컴포넌트의 render함수이다.
functional components are just the render function of a class component.
2.props 에 접근하고 사용할 수 있지만 , state 를 가질 수는 없다.
you can use props in funtioncal components , but they can't have states.
3.lifecyle method를 사용할 수 없다. 따라서 UI 에 집중하게 되고 app 의 행동에는 크게 관여하지 않는다.
you can't use lifescyle methods with functional components. instead,they solely focus on the UI,no the behavior of the app.
4.this 키워드를 사용할 수 없다.
with functional component,you don't have a this keyword to use.
Class component
1.클래스형 함수는 ES6문법을 백분 사용할 수 있다.
class components make use of the ES6 class syntax
2.따라서 componentwillmount 혹은 componentDidMount 와 같은 lifecycle 메소드를 사용할 수 있다.
therefore, they can make use of lifecylcle methods.
3.class components 는 React.component 에서 확장된다.
class components extedn from React-Component.
4.porps 와 state 모두를 가지고 사용할 수 있으며 ,this 키워드를 사용해서 그들과 해당하는 컴포넌트 내에서 선언한 함수에 접근할수 있다.
You have to use the this keyword to access props (and also other functions you declare inside the component).
왜 functional components 를 사용해야 할까 ?
Presentational and container components :
크고 작은 다양한 사유들이 있을 수 있겠지만 ,큰 맥락에서는 presentational 과 contatiner Components 의 용도에 따라서 교환사용이 가능하다.
presentational component란 UI 구현에 있어 표면적인 부분에 집중한 component 로 state 를 가질필요가 없고, lifecycle method가 불필요한 경우 사용한다.
contatiner component는 그 반대로 기능구현 및 관련된 state를 manage 하는 기능과 lifecycle method 를 사용해야하는 component이다.
처음으로 프로젝트의 시작은 functional component로 시작해서 중간 중간 필요에 의해서 class component로 변경하는 것도 전혀 문제가 되지 않기 때문에 일단 조금 더 가벼운 functional component 로 시작하는 것을 추천한다.
장단점
functional component 의 경우 state 를 사용할 수 없다는 점, lifecycle method 를 활용할수 없다는점, this 키워드를 사용할수 없다는점을 감안한다면 아래와 같은 장점을 볼수있다.
1.simplicity (걍 심플)
일단 functional component를 사용하게 되면 대부분의 환경에서 코드를 몇줄 정도 줄일수 있다. 그리고 UI 구현에 집중하기 때문에 상대적으로 Bug 를 빠르게 찾아내고 해결할 수 있다.
2.Testability (테스트 최적화)
functional component는 side effect 가 없기 때문에 pure function(순수함수)라고 할수있다. 따라서 쉽게 테스트가 가능하다 . 뭔가를 input 하면 뭔가가 output 된다는 간결하고 직관적인 구조기 때문에 가능한 것이다.
