일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 로컬터널
- 렉시컬 환경
- JavaScript
- AbortController
- 자바스크립트
- 실행 컨택스트
- fetch 취소
- 유사배열
- 호이스팅
- 호출 스택
- pushstate
- 로드마크
- debounce
- Lexical environment
- 비동기 작업
- webpack
- hoisting
- 웹팩
- 매클로태스크
- 화살표 함수
- relatedTarget
- 이벤트 루프
- Call stack
- 클론코딩
- 넘블
- localtunnel
- 이터러블
- 마이크로태스크
- 번들러
- 함수형
- Today
- Total
내가 보려고 만든 개발 공부 일지
함수형 프로그래밍 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 를 적극 활용하는 라이브러리로 변모하게 된것이다.
'Javascript' 카테고리의 다른 글
자바스크립트 - 배열, 이터러블, 유사배열 (0) | 2022.02.25 |
---|---|
자바스크립트 onfocus 와 onblur 그리고 relatedTarget (0) | 2022.02.05 |
history.pushState ( 화면 전환 ) (0) | 2021.09.21 |
Javascript - Prototype object (0) | 2021.07.16 |
Javascript - in vs hasOwnProperty (0) | 2021.07.12 |