함수형 컴포넌트

함수형 컴포넌트

이전 시간에 배운 클래스형 컴포넌트와 달리 함수 형태로 정의되며, 더 간결하고 직관적인 방식으로 UI를 표현이 가능함

 

특징

1. 생명주기 메서드의 부재 : props를 받아 단순히 리액트 요소만 반환하는 함수임
   
   
2. 함수형 컴포넌트와 렌더링된 값 : 클래스형 컴포넌트의 props는 this로부터 가져오고 this가 가리키는 객체의 경우 변경이 가능하기에 변경된 값을 읽어 render을 비롯한 다른 메서드가 실행된다. 반면 함수형 컴포넌트의 경우 this에 바인딩된 props가 아닌 props자체를 받기에 값이 변경 불가하고, 해당 값을 그대로 사용하게 된다.
   
   
   
3. 함수 형태로 정의 :함수형 컴포넌트는 단순한 JavaScript 함수로 정의됩니다. JSX를 반환하며, 반드시 return 문 안에 UI 요소를 포함해야 한다. (또는 화살표 함수로도 정의가 가능하다)
   
   
4.  클래스형 컴포넌트보다 가볍고 성능이 좋음 : 16.8 버전 이후로 useState, useEffect와 같은 hooks의 도입으로 상태 및 사이드 이펙트를 편리하게 가능함
   
   
   
5. useEffect와 useCallBack을 통한 성능 최적화 : 불필요한 렌더링을 방지해 성능개선 가능
   1. useMemo : 값이 변경될 때만 재계산
   2. useCallback : handleClick 함수가 매번 새로 생성 되지 않음

 

기타 내용을 비교하자면 다음과 같다.

특징	함수형 컴포넌트	클래스형 컴포넌트
정의 방식	함수로 정의	ES6 클래스 사용
상태 관리	useState 사용	this.state 사용
라이프 사이클	useEffect 사용	componentDidMount, componentDidUpdate 사용
this 키워드	없음	this 사용 필요
성능	더 가벼움	상대적으로 무거움

 

 

결론

- 함수형이 주된 컴포넌트 생성 방식이 되었다면 클래스형 컴포넌트를 굳이 배워야 할까?

• 사라질 계획 안보인다 알아둬라
• 리액트에 좀 익숙해졌으면 함 해봐라
• 흐름 알려면 알아두긴 해야한다 특히 자식 컴포넌트 발생 에러처리는 클래스형 컴포넌트로만 가능하다

 

현재는 함수형 컴포넌트가 클래스형 컴포넌트보다 성능 최적화가 용이하기에, 최신 React에서는 함수형이 주로 사용된다.

 

몇가지 hooks들로 해결이 되었지만 렌더링마다 내부 로직이 다시 실행되는 문제나 useEffect의 의존성 배열을 잘못 설정하는경우 의도치 않게 작동하고 효율이 떨어질 수 있기에 함수형 컴포넌트를 사용할 경우 각 hooks에 대한 이해가 수반되어야 할 것 같다.