함수형 프로그래밍 vs 객체지향 프로그래밍

함수형 프로그래밍 - Functional programming (FP)

객체지향 프로그래밍 - Object oriented programming (OOP)

 

개발자라면 이 둘에 대해 한번쯤은 들어봤을 개발 패턴이다.

FP 든 OOP 든 개발 방식의 차이일뿐, 뭐가 더 좋고 나쁘고는 없다.

 

 

 

[ 함수형 프로그래밍 ] 

전달받은 인자값을 중심으로 결과값을 반환하는 간결한 방식의 프로그래밍으로

데이터를 함수 내부에서 따로 저장하거나 하지 않는다.

한 번에 하나의 작업만 수행하는 함수들의 조합으로 로직을 처리한다.

 

예) func(obj) : 함수 인자값으로 객체, 함수 등을 넘겨 작업을 수행.

특징 : 함수안에 함수, 여러 함수로 구성된 고차함수, *순수함수

 

*참고로 순수함수란 ?

다음과 같은 조건을 충족하는 함수를 순수함수라고 부른다.

1. 함수 밖같 환경을 조작해선 안됨 = side effect 를 만들지 않는다.

   (side effect란 부수효과 라는 뜻으로, 지금 수행중인 작업으로 인해 외부의 데이터가 바뀌게 되는것을 말한다.)

2. 같은 입력값에 대해 항상 같은 값을 리턴한다. = 랜덤함수, Date 객체 등은 함수 내부에서 사용하지 않는다.

   사용하려면 함수 밖같에서 수행하고 그 결과를 함수의 인자로 전달하자.

3. 한번에 한가지 작업만 한다. = 성격이 조금이라도 다른 작업이라면 if 로 나누지 말고

   함수를 하나 더 만들어 코드를 분리시킨다.

4. 데이터의 불변성을 유지한다. = 인자로 받은 값을 직접 바꾸지 않고 복사본을 만들어 조작한다. (1번과 겹치는 개념)

   인자로 받은 값이 배열이나 객체같은 참조타입 이라면 .slice() .filter() .map() 이나 {...param} 로 복사한뒤 작업하자.

 

정리하면, 순수함수는 외부에 어떤 영향도 끼치지 않고 한가지 일만 하고 끝나는 함수.

 

 

 

[ 객체지향 프로그래밍 ]

OOP : 객체 내부에 상태변수와 메소드를 가지고 있고 그것들끼리 긴밀한 관계를 맺고있음, 클래스로 만들어진 인스턴스마다 다른 상태값을 가지고 있기 때문에 같은 인자값에 대해 다른 결과값이 리턴될 수 있음.

 

예) obj.func() : 객체 내부의 메소드를 호출.

특징 : 관련된 기능을 모아놓은 종합선물세트, 객체들간 상호작용으로 로직 처리

 

 

 

[ React 와 FP ]

React는 원래 클래스로 컴포넌트를 만들었다. OOP 스타일로 개발을 한것이다.

그런데 클래스형 컴포넌트는 객체이기 때문에 발생하는 버그가 있었는데...

 

그것은 바로 this 바인딩 문제.

JS 에서 this 는 선언된 시점이 아닌, 호출된 순간의 환경에 따라 다른 값이 할당된다.

 

친구를 팔로우하는 Profile 컴포넌트가 있고, 아래와 같이 메시지를 출력하는 메소드가 있다고 하자.

// Profile.js
showMsg = ()=> {
	alert(this.props.friend + " 를 팔로우 했습니다.")
}

친구를 팔로우 하면 3초 후에 this.showMsg() 라는 메소드가 실행되어 "~ 를 팔로우 했습니다." 라는

메시지를 띄워준다고 가정해보자.

 

1.  A 친구 프로필에 들어가서 팔로우 클릭. (3초 후 메시지 출력 예정)

2.  3초가 지나기 전에 B 친구 프로필로 이동

3.  3초가 되고 this.showMsg() 호출

4.  "B 를 팔로우 했습니다." 라는 메시지 출력..

 

--> A를 팔로우 했으나 메시지에는 B 라고 출력된다.

이는 메시지를 출력할 시점에 B 의 프로필에 있었기 때문에 this 에는 B 의 context 가

바인딩 되어있기 때문이다.  

 

이런 이유로 React는 클래스형 컴포넌트 보단 함수형 컴포넌트를 사용하기 시작했고,

클래스 컴포넌트에서만 쓸 수 있었던 생명주기 함수, setState 도

useEffect, useState 같은 Hook을 도입하여 함수형 컴포넌트를 개선하였다.

 

함수형 컴포넌트는 전달받은 인자값(props) 이 호출 시점과 상관없이 바뀔일이 없기 때문에

위에서 언급한 클래스형 컴포넌트의 버그도 발생하지 않는다.

무엇보다 클래스형 보다 작성할 코드량이 확 줄게되어 가독성도 좋아진다.

 

함수형 컴포넌트는 jsx 를 반환하는 함수, Hook 도 결국 함수 이므로

리액트는 FP 를 적극 활용하는 라이브러리로 변모하게 된것이다.