"함수 컴포넌트"와 "함수형 컴포넌트"가 같은 말이라고 생각하시나요?

sunny·2021년 8월 12일
6
post-thumbnail

오늘 동료 중 한 분이 제목과 같은 질문을 내게 던졌다.
난 잠시동안 고민하다가 "음.. 같지 않나요?" 라고 대답했다.
동료는 말 없이 React 공식문서를 켜서 내게 보여주었다.

함수형 컴포넌트에 대한 검색결과가 없다.
영어로 쳐도 마찬가지다.
Functional Component는 react 공식문서 그 어디에도 적혀져 있지 않다.

그렇다면 왜 나를 포함한 몇몇은 함수 컴포넌트를 함수형 컴포넌트로 오용해서 사용하고 있었을까?


해당 이슈(https://github.com/reactjs/reactjs.org/pull/863)를 보면 답을 얻을 수 있다.

실제로 React에서는 Functional Component 라고 네이밍을 했다가, 누군가가 "함수형 컴포넌트를 사용하면 함수형 프로그래밍 방법으로 개발을 하는건가?" 라는 혼란을 야기할 수 있다는 문제를 제기한 것이다.

그렇게 Functional Component라는 네이밍은 1년 가량 유지되다가 Function Component로 이름이 바뀌게 되었다.


이런 흐름으로 인해 인터넷 상에서 많은 이들이 "함수형 컴포넌트를 사용하면 함수형 프로그래밍을 할 수 있게 해준다." 와 같은 오해를 하게 된 것이다.


함수 컴포넌트와 함수형 프로그래밍

우선 함수형 프로그래밍에 대해 이해할 필요가 있다.
함수형 프로그래밍은 순수함수의 구성으로 이루어진 프로그래밍 방법론이다.

그렇다면 순수함수란 무엇일까.
순수함수란

  1. side effect를 받지 않으며
  2. 같은 값을 넣었을때 리턴되는 값이 항상 같아야한다.

간단하게 예를 들어서 살펴보자.

const plus = (a, b) => {
  return a + b;
}

a와 b의 값을 받아 더한 값을 리턴해주는 함수가 있다.
이 함수는 같은 값을 넣으면 항상 같은 값을 리턴해주기 때문에 순수함수이다.

const c = 1;
const plus = (a, b) => {
  return a + b + c;
}

그렇다면 이 함수는 어떨까?
plus함수 바깥에 있는 c의 값이 달라지면, 같은 a와 b의 값을 넣는다고 해도 다른 값이 리턴될 가능성이 있다. 이것은 순수함수가 아니다.


그럼 다시 react로 돌아와서 우리가 작성하는 함수 컴포넌트는 어떤지 생각해보자.
같은 값을 넣으면 항상 같은 값이 리턴될까?

예를 들어 반응형 페이지를 제작한다고 하면, 같은 컴포넌트를 사용한다고 하더라도 웹의 환경에 따라 결과물은 달라지기 때문에 순수함수라고 보기 어렵다.

게다가 우리가 밥먹듯 사용하는 useEffect라는 hooks를 생각해보자. 이름부터가 effect이다. 우리는 컴포넌트를 작성할 때 side Effect를 필수 불가결하게 사용하고 있다.


그러므로 함수 컴포넌트로 함수형 프로그래밍의 방법론으로 코드를 작성한다는 것은 nonsense한 면이 있다.


급 마무리를 짓자면, '함수형 컴포넌트'는 마치 "함수형 컴포넌트를 사용하면 함수형 프로그래밍을 할 수 있게 해준다."와 같은 오해를 불러일으킬 수 있으니, 되도록이면 함수 컴포넌트 (Function Component) 라는 네이밍을 사용하자는 것이 결론이다.

profile
blog 👉🏻 https://kimnamsun.github.io/

0개의 댓글