⚡ 프론트엔드, 함수형 프로그래밍이 선호되는 이유
요즘 프론트엔드 진영에선 함수형 프로그래밍은 더욱 선호되는 추세를 보입니다.
그 이유는 정말 다양하지만 본론에 들어가기 전, 간단하게 요약하자면
“코드를 간결하고 유지보수하기 쉽게 유지하기 위해서”라고 할 수 있습니다.
그럼 왜 프론트엔드 진영에서 FP의 어떤 장점이 부각되어 선호되는지 알아보겠습니다.
📌상태 관리의 용이성
함수형 프로그래밍은 상태 변이를 최소화하여 코드를 더 예측 가능하고
안정적으로 만드는 것이 가능합니다.
그 이유는 각각의 함수들이 순수 함수로 만들어지기 때문입니다.
💡 순수 함수 : 동일한 입력에 대해 동일한 값을 반환하는 함수
순수 함수는 입력값에 대해서만 의존하고,
외부 상태를 변경하지 않는 함수기 때문에 예측 가능하며,
여러 개의 스레드에서 안전하게 사용할 수 있습니다.
📌코드의 간결함
사용자 입력 처리와 반복되고 복잡한 UI를 표현하는 코드를 작성 및 유지보수 하려면
가독성이 뛰어나고 간결한 코드는 반드시 필요합니다.
함수형 프로그래밍에서는 복잡한 로직들을 추상화해 선언적으로 코드를 작성하기 용이합니다.
이렇게 추상화 된 코드들은 반복되는 라인을 줄여 가독성이 뛰어나며
일관성 있는 코드를 통해 유지보수에도 용이합니다.
📌불변성
🔎 성능 향상
리액트는 가상 DOM(virtual DOM)을 사용하여 UI를 렌더링 합니다.
가상 DOM은 이전 상태와 현재 상태를 비교하여 변경된 부분만을 실제 DOM에 반영합니다.
이때, 이전 상태와 현재 상태가 다르다면, 변경된 부분을 찾는 과정이 빠릅니다.
하지만, 상태가 변경되었음에도 불구하고, 상태 객체를 직접 수정하게 되면
이전 상태와 현재 상태가 같아 보일 수 있으므로, 리액트는 변경된 부분을 찾지 못합니다.
그러면, 변경된 모든 부분을 다시 렌더링해야 하기 때문에 성능이 저하됩니다.
이에 반해, 불변성을 유지하면 상태가 변경되었음을 리액트가 인식할 수 있으므로,
변경된 부분만을 찾아서 반영할 수 있어 성능이 향상됩니다.
🔎 버그 예방
불변성을 유지하면 객체나 배열을 수정하는 코드가 잘못되었을 때
발생할 수 있는 버그를 예방할 수 있습니다.
객체나 배열이 참조 타입이기 때문에,
해당 객체나 배열의 내용을 변경하면 참조하는 모든 변수에 영향을 미칩니다.
그렇기 때문에 객체나 배열을 직접 수정하면 의도하지 않은 결과가 발생할 수 있습니다.
그러나, 불변성을 유지하면 원본 객체나 배열을 복제하여 수정하므로,
해당 객체나 배열의 내용이 변경되어도 다른 변수에는 영향을 미치지 않아 버그가 예방됩니다.
🔎 예측 가능한 상태
리액트에서는 단방향 데이터 흐름을 따릅니다.
즉, 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하고,
자식 컴포넌트는 받은 데이터를 수정하지 않고 부모 컴포넌트에게 다시 전달합니다.
만약, 자식 컴포넌트가 받은 데이터를 수정하게 된다면, 예측할 수 없는 상태 관리가 됩니다.
그러나, 불변성을 유지하면 데이터가 변경되어도 원본 데이터를 복제하고 수정하기 때문에,
예측 가능한 상태 관리가 가능합니다.
이러한 장점들이 프론트엔드에서 더욱 부각되기 때문에
함수형 프로그래밍이 계속해서 인기를 얻고 있습니다.
그렇다면 어떤 이유 때문에 프론트엔드에서 객체 지향 프로그래밍이 선호되지 않을까요?
⚡객체 지향 프로그래밍이 선호되지 않는 이유
📌객체의 변경
FP의 설명에서는 순수 함수를 사용하여 예측 가능한 상태가 된다고 했습니다.
객체 지향 프로그래밍에서는 객체의 상태를 변경하는 것이 중요한 개념 중 하나이며,
객체는 데이터(필드)와 그 데이터를 조작하는 메서드를 포함하는데,
이 메서드는 객체의 상태를 변경할 수 있습니다.
객체 지향 프로그래밍에서는 객체의 상태를 변경해야 하는 경우가 많아서,
상태 변경이 발생할 때마다 함수의 반환 값이 예측 가능하지 않을 수 있습니다.
또한, 여러 객체가 상태를 공유할 때, 상태 변경이 예측 가능하지 않은 결과를 낳을 수 있습니다.
객체 지향 프로그래밍에서도 객체의 상태를 변경하는 것을 최소화하고,
불변성을 유지하는 방법을 적용하여, 순수 함수의 개념을 부분적으로 적용할 수 있습니다.
그러나 객체의 상태를 변경하는 것이 필수적인 경우가 많고,
위에서 나열한 순수 함수와 불변성의 장점을 100% 살리지 못하기 때문에
프론트엔드 프로그래밍에서 객체 지향보다 함수형 프로그래밍이 선호되고 있습니다.
'React' 카테고리의 다른 글
[React] Whitelabel Error Page 에러, 리액트로 간단하게 해결하기 (0) | 2023.08.04 |
---|---|
[React+TS] styled-components, ThemeProvider 타입 정의하기 (0) | 2023.05.28 |
[React] Context API와 의존성 주입 (0) | 2023.05.08 |
[React] 리액트와 Side Effect (0) | 2023.04.18 |
[React] react-query, 리액트 쿼리를 사용해야 하는 이유 (2) | 2023.04.16 |
댓글