함수 컴포넌트는 리액트 0.14버전부터 만들어졌다. 다만 처음 만들때는 stateless functional component(무상태 함수 컴포넌트)로 별도 상태 없이 단순히 어떠한 요소를 정적 렌더링하는 목적이었다.
함수 컴포넌트가 각광받기 시작한것은 16.8버전에서 훅이 소개된 이후이다.
함수형 컴포넌트의 장점
- render 내부에서 필요한 함수를 선언할 때 this 바인딩을 조심할 필요 없음
- state는 객체가 아닌 각각의 원시값으로 관리되어 훨씬 사용이 편리함
- state 객체 관리도 가능
- 렌더링하는 코드인 return에서도 굳이 this를 사용하지 않더라도 props와 static에 접근 가능
함수 컴포넌트 vs 클래스 컴포넌트
생명주기 메서드의 부재
클래스 컴포넌트의 생명주기 메서드가 함수 컴포넌트에는 존재하지 않음
함수 컴포넌트는 props를 받아 단순히 리액트 요소만 반환하는 함수
하지만 클래스 컴포넌트는 render메서드가 있는 React.Component를 상속받아 구현하는 js 클래스이기 때문.
그러므로 생명주기 메서드의 주인인 React.Component를 상속받지 않은 함수형 컴포넌트는 이를 사용할 수 없다.
함수 컴포넌트는 useEffect 훅을 사용해 앞서 언급했던 생명주기 메서드인 componentDidMount, componentDidUpdate, componentWillUnmount를 비슷하게 구현 가능(똑같지는 않음)
함수 컴포넌트와 렌더링된 값
함수 컴포넌트는 렌더링 된 값을 고정하고, 클래스 컴포넌트는 그렇지 못하다.
함수 컴포넌트는 렌더링이 일어날 때마다 그 순간의 값인 props와 state를 기준으로 렌더링됨.
props와 static가 변경된다면, 다시 한 번 그 값을 기준으로 함수가 호출
클래스 컴포넌트는 시간의 흐름에 따라 변화하는 this를 기준으로 렌더링이 일어남.
클래스 컴포넌트는 공부해야 하는가?
클래스 컴포넌트는 사라질 계획은 없어 보임. 모든 이미 작성된 코드가 컴포넌트의 훅 기반으로 모두 이관하긴 쉽지 않을 것.
허나 새롭게 만든다면 함수형으로 만드는 것이 좋아보인다. 그 뒤 익숙해지면 클래스형 컴포넌트도 작성해보면서 공부할 것. 그것이 과거 무수히 많이 작성된 코드들을 유지보수할 때 도움이 될 것이다.
