리액트를 사용하면서 함수형 컴포넌트(Functional Component) 라는 말을 한 번쯤 들어본 적이 있을 것이다. 말 그대로 함수로 된 컴포넌트라는 뜻이다. 리액트가 처음 생겼을 당시만 해도 함수로 된 컴포넌트는 없었고 모든 컴포넌트는 클래스로 이루어져 있었다.
v0.14 에서야 Stateless한 함수 컴포넌트가 생기게 되었는데, 이때부터 우리는 함수로 된 컴포넌트를 함수형 컴포넌트라고 부르기 시작했다. 그런데 언젠가부터 공식 문서에 함수형 컴포넌트라는 말은 사라지고, 함수 컴포넌트(Function Component) 라는 말을 사용하기 시작했다. 왜 그렇게 되었을까?
This doesn't mean either of them stop being functional. Just that we can might prefer to use the word "functional" to mean the paradigm and overall approach, rather than the component definition syntax.
함수형이라고 표현하는 것은 함수형 프로그래밍 패러다임을 연상시키기 때문이다. 리액트의 함수를 함수형 프로그래밍으로 작성할 수는 있겠지만, 함수 컴포넌트를 쓴다고 해서 꼭 이게 함수형 프로그래밍인 것은 아니기 때문이다.
Functional Programming is programming without assignment satements.
클린 코드(Clean Code)의 저자 Robert는 함수형 프로그래밍을 대입문(할당문)이 없는 프로그래밍이라고 정의하고 있다. 대입문이 없다는 말은 한 번 메모리에 할당이 된 값은 새로운 값으로 변할수 없다는 말이 된다. 즉 값의 대입이 없어 동일한 실행에 대해 항상 동일한 결과를 반환하는 순수 함수로 이루어진 프로그래밍인 것이다.
그런데 우리가 리액트에서 주로 쓰는 대부분의 함수 컴포넌트는 순수한 것과는 거리가 멀다. hook의 도입으로 함수 컴포넌트가 상태를 가질 수 있게 되면서 대부분의 함수 컴포넌트는 Side Effect를 가지게 되었기 때문이다. 이를 두고도 함수형 컴포넌트라고 부른다면 함수형 프로그래밍 패러다임의 정의를 잘 모르는 입장에서는 내가 함수형 프로그래밍을 하고있구나 라고 충분히 오해할 여지가 있다.
💡Side Effect : 함수를 입력값에 대해 일정한 출력을 하는 것으로 가정할 때, 출력값에 영향을 미치지 않는 모든 작업들을 side effect라고 할 수 있습니다. 또는 일정한 함수의 출력에 예상하지 못한 부수적인 효과를 의미하기도 합니다. (긍정적, 부정적 의미 둘 다 가질 수 있다.)