closure를 이용한 HOC, HOF

Closure

closure 를 mdn 에서 찾아보면 lexical scoping 에 대해 먼저 알아야 한다고 설명한다. 그리고 lexical scoping의 정의를 다음과 같이 설명하고 있다.

"lexical"이란, 어휘적 범위 지정(lexical scoping) 과정에서 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는지 고려한다는 것

^^...
뭔소리야

이럴 때마다 의역의 중요성을 느낀다. 저 문장 하나를 이해하기 위해 이것저것 찾아본 결과 이렇게 이해했다.

스코프는 함수가 선언됐는지에 따라 결정되는데 이것을 lexical scoping 이라고 한다.

그리고 closure 는 이러한 스코프의 특성탓에 함수 안에 선언된 함수가 자신을 포함하고 있는 함수의 변수에 접근할 수 있게 해주고,

closure는 내부 함수가 외부 함수에 선언된 변수에 접근할 수 있게 하는 js의 특성이다. 이 특성 덕분에 함수가 종료된 후에도 변수에 접근할 수 있게 된다.

어떤 함수를 렉시컬 스코프 밖에서 호출해도, 원래 선언되었던 렉시컬 스코프를 기억하고 접근할 수 있도록 하는 특성을 클로저

이러한 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 ~