Functional Programming (===) or (!==) Function Component ?

March 26, 2021

유튜브 구독해놓은 개발자 분께서, 함수형 프로그래밍이란 영상을 올리셨길래 보면서 겪었던? 일을 회상하며 정리해보려고 한다.

이전에 모 기업 면접을 보던 중 받았던 질문이 있다.

❝ 함수형 프로그래밍을 사용해보신 적 있나요? ❞

조금 고민을 하였지만,

❝ 아니요 ❞

라고 대답을 하였다.

고민을 했던 이유는 내가 React 에서 자주 사용하고있는 함수형 컴포넌트들이 과연 함수형 프로그래밍이 맞나 잠시 생각해보았지만, 잘 알지도 못하는 함수형 프로그래밍이 맞다고 확신하기는 아직 이르다 생각하여 대답에 부정하였다.

React Component, Functional Programming

이전까지는 React를 사용할 때 Class를 기반으로한 컴포넌트를 계속 만들어왔는데, 고유의 속성값들(데이터)와, 내부에서 사용하는 메소드를 갖고있는 구조를 보았을 때 전형적인 객체지향 프로그래밍 이라는 느낌이였다.

그래서 종종, React에서 React Hook을 등장시키고, function 기반의 컴포넌트를 만들수 있게 되자, 이것이 함수형 프로그래밍이라는 글도 심심치않게 검색되는것 같았다.

하지만, 함수형 프로그래밍의 조건을 고려해보았을 때, 모든 function 기반의 컴포넌트들이 그 조건에 충족되는지는 잘… 모르겠다.

특징

Pure Functions

말 그대로 순수함수이다. 함수에 동일한 인자를 넣었을 때 동일한 결과값을 반환하는 함수이다. 개인적으로 이 조건이 가장 걸렸던것 같다.

단순하게 view를 그려내는 컴포넌트 만큼은 받은 속성값으로만 작동되기 때문에, 어디에서든 재활용이 가능하여 함수형 프로그래밍이라고 할 수 도 있겠다는 생각은 들었다.

뭐 이런애들..?

// loa-hands
export default ({ backSrc, src, grade }) => {
  return (
    <div className="imgWrap">
      {backSrc && (
        <img
          className={`imgWidth contentBoxBorder gradient${grade}`}
          src={backSrc}
          alt="partImg"
        />
      )}
      {src && (
        <img
          className={`equipMainImg absolute imgWidth gradient${grade}`}
          src={src}
          alt={src}
        />
      )}
    </div>
  )
}

하지만 React Hook을 사용하다보면, useEffect나 useState등의 각종 Hook들이 연결되어있는 function기반의 컴포넌트들이 존재한다.

이러한 Hook들은 변수로 보내지는것이 아닌, 외부의 자원을 이용하는데 이러한점 자체가 순수 함수에 위반되는 Side Effect가 아닌가 싶다..

사실상 여기에 쓰인 new Date 또한 Side Effect

// loa-hands
const Index = () => {
  const { homeData, setHomeData } = HomeDataHook()

  DateOverHook(setHomeData)

  const today = new Date().getSeconds()
  const yoil = new Date().getDay()

  return (
    <section className="home">
      <EventSection events={homeData?.events} />
      <CalendarSection
        calendar={homeData?.calendar}
        today={today}
        yoil={yoil}
      />
      <TimerSection data={dailyIsland} today={today} text="오늘의 모험섬" />
      <TimerSection
        data={fieldBoss[yoil]}
        today={today}
        text="오늘의 필드보스"
      />
      <TimerSection
        data={chaosGate[yoil]}
        today={today}
        text="오늘의 카오스 게이트"
      />
      <TimerSection data={oceanCont[yoil]} today={today} text="오늘의 항해" />
    </section>
  )
}