면접을 준비하다 보니 질문 리스트를 보니 “함수형 프로그래밍” 이라는 단어를 엄청 오랜만에 들었다.
javaScript는 함수형 프로그래밍이 가능한 언어라고 하면서 프론트엔드에서는 이 개발 방법론이 유행이라는 글도 react를 처음 배울 때 간간히 들었었는데… 머리가 좀 크고 나서는 궁금증이 생겼다.
함수형 프로그래밍이 그래서 정확히 뭐고, 프론트 엔드 분야에서 이야기가 종종 나올까???
함수형 프로그래밍의 정의와 특징
정의
“함수를 값처럼 다루고, 상태 변경 없이 데이터를 처리하는 프로그래밍 패러다임”
특징
- 상태(state)를 바꾸지 않으려고 해요. 👉 기존 값을 바꾸기보단, 새 값을 만들어 리턴하는 식.
- 순수 함수(pure function)를 추구해요. 👉 같은 입력이 들어오면 항상 같은 출력이 나오고, 외부 상태에 의존하지 않음.
- 함수는 1급 객체(first-class)이에요. 👉 변수처럼 저장하고, 인자로 넘기고, 함수에서 함수를 리턴할 수 있어요.
머리를 스치는 무언가가 있긴 한대…
그래서 G선생님에게 물어봤다! 그런데 놀랍게도
제… 제가요?
실천하고 있는 줄도 몰랐었는데… 그래서? 특징 3개를 우선 해체 분석 해보았다.
1. 기존 값을 바꾸기보단, 새 값을 만들어 리턴 한다?
함수형 프로그래밍은 함수 내부에서는 절대 외부의 값을 바꾸지 않는다고 한다.
그러면서 나온 예제가 좀 의문인 점이 있는대
// ❌ 상태를 직접 바꿈 (권장 X) const user = { name: "태헌", age: 29 }; user.age = 30; // 기존 객체 직접 수정 // ✅ 새 값을 만들어 리턴 (불변성 유지) const user = { name: "태헌", age: 29 }; const updatedUser = { ...user, age: 30 }; //React const [list, setList] = useState(["A", "B"]); // ❌ 기존 배열 수정 list.push("C"); setList(list); // 렌더링 안됨 // ✅ 새 배열 생성 setList([...list, "C"]); // 렌더링 정상 동작
응? 결국에는 값이 29에서 30으로 바뀌고, 배열도 C가 추가된 다른 값을 얻는 것 아니야??
핵심은 어떻게 바뀌는 지가 중요하다!
사실 TypeScript예제를 볼 때는 그렇게 와 닿지 않았지만
React의 랜더링 과정과 연관 지어 설명을 들으면 이해가 한번에 된다.
React 개발자라면 Virtual DOM 이라는 것이 있고, 이 가상 DOM은 State가 변경되면
새로운 가상 DOM을 만들어 이전 DOM과 새로 만든 DOM을 비교하여 변경된 부분만
실제 DOM에 반영한다는 내용을 알고 있을 거다.
놀랍게도? 이 비교 부분이 얕은 비교로 변수의 주소가 바뀌어야 인식을 할 수 있다고 하는 것이다.
C++을 배웠던 것이 이렇게 또….
결론은
React는 상태를 불변하게 다룬다는 점이 함수형 프로그래밍과 일치한다. Virtual DOM은 state의 객체가 새로 만들어 져야 변화를 인식한다.
2. 순수 함수를 추구한다.
순수 함수란 어디서 호출하던 같은 입력은 항상 같은 출력을 내보내고, 외부의 상태나 환경에 의존하지 않고, 그걸 바꾸지도 않는 함수.
아! 이건 내가 딱 알지 React는 props를 제외하면 외부에서 오는 값이 없으니
항상 같은 결과를 리턴 하잖아 하면서 읽다가 문뜩… 떠오른 한 가지가 있었다.
그렇다 사실 이 글의 제목은 함수형 프로그래밍 React 였으나 여기서 제목을 바꿨다.
여기서 한 가지 생각할 점은 javaScript는 함수형 프로그래밍을 지원하는 것이지,
함수형 프로그래밍만 가능한 언어는 아니다는 것이다.
전지전능한 G선생님은 말씀하셨다.
💡 근데 중요한 건…
사실 이 답변은 DarkMode를 구현할 때가 떠오르게 했다.
ContextApi를 통해 전역 상태를 구성하고, 토글 버튼을 만들 때
Atomic Design을 추구하는 나에게 최대 고민은
“이 토글 버튼 테마 말고 다른 토글에도 쓸 수 있지 않을까?"
그 결과 아이콘도 받고, 클릭 시 사용할 함수도 제네릭으로 받고
아주 끔찍한 혼종을 만들고 재활용도 결국 못했던 기억이 있다.
함수형 프로그래밍 특징 중 2번은
아주 작은 단위의 컴포넌트도 단독으로 호출될 수 있는 Atomic Design과 결을 같이하고
이는 결국 좋은 React 컴포넌트를 만드는 그런 프로그래밍 방법론이지 않을까 한다.
3. 함수는 1급 객체(first-class)이다.
1급 객체의 정의와 특징
1급 객체(First-Class)란 프로그래밍 언어에서 변수처럼 다뤄질 수 있다면
비교적 쉬운 내용이 이다.
우리는 다 실제로 React 개발을 하다 보면 함수형 컴포넌트에 props로 함수를 줄 때도 있고
함수를 변수에 할당하여 선언하고 사용할 때도 있고,
onClick 이밴트에 매개변수가 필요한 함수를 호출할 때도 사용 했었으니까.
<button onClick={()=>{toggleTheme(themeState)}}
GPT가 좀더 보기 깔끔하게 정리도 해줬다.
💡 React에서 1급 함수의 활용 예
상황 | 함수 활용 예 |
콜백 전달 | onClick={() => handleClick()} |
커스텀 Hook | useSomeHook((data) => { ... }) |
조건부 렌더링 | items.map(item => <Item key={item.id} {...item} />) |
커링, 구성 | const handle = (type) => () => doSomething(type) |
결론 및 배운 점
지금 까지 React를 배우고 사용하면서 나는
함수형 프로그래밍을 배운 적은 없지만, React를 쓰다 보니 자연스럽게 그렇게 하고 있었다.
리엑트에서는 알게 모르게 함수형 프로그래밍을 강요하고 있기도 했으니까.
(정말 다행 하게도 클래스형 컴포넌트를 안 배우기도 했고….)
이 글의 결론은
React하면 자연스럽게 함수형 프로그래밍 하는 겁니다.
는 아니다.
이걸 봤다면 앞으로 우리가 만들 컴포넌트들도
함수형 프로그래밍을 따라갈 수 있도록 만들어야 하지 않을까?
- props만 보고 동작이 예측되는 컴포넌트
- 부작용을 최소화하고 컴포넌트 분리
- 전역 상태도 최소화해서 side effect를 통제
마지막으로 GPT의 조언을 보고 끝을 내겠다.
오늘도 감사했습니다. G-man