함수형 프로그래밍 - Functional programming (FP)
객체지향 프로그래밍 - Object oriented programming (OOP)
[ 함수형 프로그래밍 ]
전달받은 인자값을 중심으로 결과값을 반환하는 간결한 방식의 프로그래밍으로
데이터를 함수 내부에서 따로 저장하거나 하지 않는다.
한 번에 하나의 작업만 수행하는 함수들의 조합으로 로직을 처리한다.
예) func(obj) : 함수 인자값으로 객체, 함수 등을 넘겨 작업을 수행.
특징 : 함수안에 함수, 여러 함수로 구성된 고차함수, *순수함수
*참고로 순수함수란 ?
다음과 같은 조건을 충족하는 함수를 순수함수라고 부른다.
-
함수 밖같 환경을 조작해선 안됨 = side effect 를 만들지 않는다.
(side effect란 부수효과 라는 뜻으로, 지금 수행중인 작업으로 인해 외부의 데이터가 바뀌게 되는것을 말한다.)
-
같은 입력값에 대해 항상 같은 값을 리턴한다. = 랜덤함수, Date 객체 등은 함수 내부에서 사용하지 않는다.
사용하려면 함수 밖같에서 수행하고 그 결과를 함수의 인자로 전달하자.
-
한번에 한가지 작업만 한다. = 성격이 조금이라도 다른 작업이라면 if 로 나누지 말고
함수를 하나 더 만들어 코드를 분리시킨다.
-
데이터의 불변성을 유지한다. = 인자로 받은 값을 직접 바꾸지 않고 복사본을 만들어 조작한다. (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() 라는 메소드가 실행되어 "~ 를 팔로우 했습니다." 라는
메시지를 띄워준다고 가정해보자.
-
A 친구 프로필에 들어가서 팔로우 클릭. (3초 후 메시지 출력 예정)
-
3초가 지나기 전에 B 친구 프로필로 이동
-
3초가 되고 this.showMsg() 호출
-
"B 를 팔로우 했습니다." 라는 메시지 출력..
--> A를 팔로우 했으나 메시지에는 B 라고 출력된다.
이는 메시지를 출력할 시점에 B 의 프로필에 있었기 때문에 this 에는 B 의 context 가
바인딩 되어있기 때문이다.
이런 이유로 React는 클래스형 컴포넌트 보단 함수형 컴포넌트를 사용하기 시작했고,
클래스 컴포넌트에서만 쓸 수 있었던 생명주기 함수, setState 도
useEffect, useState 같은 Hook을 도입하여 함수형 컴포넌트를 개선하였다.
함수형 컴포넌트는 전달받은 인자값(props) 이 호출 시점과 상관없이 바뀔일이 없기 때문에
위에서 언급한 클래스형 컴포넌트의 버그도 발생하지 않는다.
무엇보다 클래스형 보다 작성할 코드량이 확 줄게되어 가독성도 좋아진다.
함수형 컴포넌트는 jsx 를 반환하는 함수, Hook 도 결국 함수 이므로
리액트는 FP 를 적극 활용하는 라이브러리로 변모하게 된것이다.
