Closure
클로저는 어떤 함수를 렉시컬 스코프 밖(함수가 종료된 후)에서 호출해도, 원래 선언되었던 렉시컬 스코프를 기억하고 있기 때문에 접근이 가능하게 만들어 준다.
이러한 closure를 이용해 HOF(High Order Function)과 HOC(High Order Componet)를 사용할 수 있다.
currying
함수를 반환하는 함수를 말한다. 함수를 재활용하고 코드의 중복 작성을 피하기 위해 사용한다. 고차함수라고 생각하면 쉽다.
HOF
High Order Function으로 외부 함수 안에 내부 함수가 들어있는 고차 함수다.
function aaa(){
let apple = "이건 사과예요"
return function bbb(){
let banana = "이건 바나나예요"
console.log("안녕하세요")
console.log(apple)
console.log(banana)
}
}
aaa()()
// "안녕하세요"
// "이건 바나나예요"
// "이건 사과예요"함수 bbb 에는 apple 이라는 변수가 선언되어 있지 않지만 스코프 체인으로 인해 바로 위에 선언된 함수 aaa 의 안에 들어있는 apple 이라는 변수에 접근할 수 있게 된다. HOF 가 실행되는 과정은 아래 이미지와 같다.
권한분기
어떤 사이트를 이용하는 유저들에게 사이트를 이용할 수 있는 권한을 나누는 것을 말한다.
- 회원 / 비회원 간의 권한 분기
- 관리자 / 회원 간의 권한 분기
하지만 사이트의 모든 페이지에 코드를 작성해 넣는 것은 비효율적인 작업이 될 것이다. 이런 작업을 줄이기 위해 HOC를 사용할 수 있다.
HOC
High Order Componet 로 HOF 와 같은 원리로 동작한다. 권한분기를 만들기 위해 사용해줄 수 있다.
페이지가 실행되기 전 먼저 실행할 컴포넌트의 parameter로 상위 컴포넌트가 실행됐을 때 보여질 컴포넌트 를 넣어준다
이렇게 만들어진 HOC는 관례상 with 를 붙인 이름을 붙여준다.
- withAuth, with ~
