REACT(리액트) Function Component(함수 컴포넌트) VS Funtional Component(함수형 컴포넌트) - 차이점과 헷갈리는 이유 그리고 적절한 말은 무엇일까?

리액트를 사용하면 두가지 스타일로 컴포넌트를 작성할 수 있다.

클래스와 함수 스타일로 작성이 가능한 것이다.

 

실제로 초기에는 상태를 조작할 수 있는 클래스(Class) 컴포넌트가 대세였으며, 함수(Function) 컴포넌트는 훅(hook)기능이 추가가 되면서 컴포넌트의 작성의 대세는 변하게 되었다.

 

여기서 우리가 알아야 하는 점은 함수형 컴포넌트는 틀린말이고, 함수 컴포넌트가 맞는말이라는 것이다.

 

그렇다면 중요한건, 우리는 흔하게 함수형(Functional) 컴포넌트라고 부르지만, 과연 함수형 컴포넌트라고도 부르는것은 적절한것일까??

 

밑에 이미지는 구글의 검색 결과이다.

 

 

 

 

---

 

 

 

이런 의문점까지 도달했다면 우리는 함수형 컴포넌트가 무엇인지 생각해 봐야할 것이다.

 

나는 개인적으로 내가 잘모르는것은 나보다 뛰어난 사람의 지식을 배워야된다고 생각한다.

클린 코드(Clean Code)의 저자 Robert는 함수형 프로그래밍을 대입문이 없는 프로그래밍이라고 정의하고 있다. 대입문이 없다는 말은 한 번 메모리에 할당이 된 값은 새로운 값으로 변할 수 없다는 말이 된다. 즉 값의 대입이 없어 동일한 실행에 대해 항상 동일한 결과를 순수 함수로 이루어진 프로그래밍인 것이다.

Robert

위의 정의를 읽다보면 한가지의 결론이 도달된다. [ 함수형 프로그래밍 === 순수 함수 ] 이다.

 

 

그렇다면 순수 함수에 대해서도 알아보자.

순수 함수의 정의는 동일한 매개변수가 주어지면 항상 동일한 결과를 반환하는 함수를 말한다.

 

- 순수 함수 예시

const a = 1;
const b = 2
const fun1 = (a, b) => a + b // 3

 

 

순수 함수는 위의 예시처럼 1번을 돌려도 100번을 돌려도 10000번을 돌려도 결과값이 3이 나와야 순수 함수에 해당되는 것이다. 그렇다면 리액트의 함수 컴포넌트는 그런가? 

 

대답은 No. hook으로 인해서 상태가 지속적으로 변하기때문에 순수 함수가 아니다. 그렇기 때문에 함수형 컴포넌트는 틀린말이 되는 것이다.

 

 

 

 

---

 

 

 

정리를 하자면, 사실 함수형(Funtional) 컴포넌트가 원래는 맞는말이였다. 그렇기 때문에 함수형 컴포넌트라고 불렀지만, hook을 도입하게 된 이후로 더 이상 순수 함수를 유지하지 못하기 때문에 리액트 자체에서 함수(Function) 컴포넌트라는 말을 사용하게 된 것이다. 

 

프로그래밍의 세계는 참 빨리 변한다. 어제까지 맞던것이 오늘은 틀려진다는 걸 새삼 느낀다. 

오늘도 새로운걸 하나를 깨닫게 된 재밌는 하루였다.