밸!하 ~

밸로그 여러분 안녕하세요

오늘은 권한 분기와 중요한 내용인 Closure와 HOC/HOF그리고
Next.js에서의 랜더링에 대해서 이야기 드릴수있도록 하겠습니다

먼저 볼것은

권한분기입니다!

1. 권한 분기란 무엇일까요?

권한분기란
예를 들어서

배달의 민족이라는 서비스가 있다고 했을때

배달의 민족을 이용하는 배달의 민족 사장님들에게만 보여주는
사장님 창이 있겠죠?
그리고 배달의 민족을 관리하는 관리자들이 보는 관리자 창 또한도 있을것입니다
또한 배달의 민족 어플을 이용하는 이용자들도 있겠죠?

자 이것을 각각의 권한을 다르게 해서
어떤 아이디로 로그인 했는지에 따라 다르게 창을 보여주게 되는것을
즉
권한에 따라서 다른 창을 보여주는 것을 권한분기라고 합니다 !

그렇게 되면 한페이지 마다 권한이 있는지 확인을 해줘야하는데
페이지가 30페이지를 수정해줘야한다면 너무 귀찮죠??

이것을 해결하기 위한 방법으로 2가지 정도가 있습니다!

바로
HOC를 만들어서 해결하는것과
custom hooks만들어서 사용하는 방법이 있습니다!

HOC를 보기이전에 먼저 봐야할 게 있습니다
바로
closure라는 건데요
그럼 closure 란 무엇일까?
바로 봐볼까요??

2. Closure란

closure란
자바스크립트에서 중요한 개념중 하나입니다!
그런데 클로저라는것은 자바스크립트에서만 사용하는 고유의 개념이 아니라 함수를 객체로 취급하는 함수형 프로그래밍언어에서 사용되는 특성입니다!
그렇다면
이 클로저라는것은 무엇일까요?
MDN에서는 이렇게 말하고 있습니다

“A closure is the combination of a function and the lexical environment within which that function was declared.”
클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다.

음 무슨의미일까요??
그럼 한개씩 봐볼까요?
여기서 중요한것은

함수가 선언됬을때! 렉시컬 환경!

이란겁니다!

그럼 렉시컬 스코프가 무엇인지 먼저 봐볼건데요!

렉시컬 스코프란

함수의 스코프는
함수를 호출할때가 아닌 함수를 어디에 선언하는지에 따라 결정된다라는게
바로 렉시컬 스코프입니다
즉
렉시컬 환경이란
함수가 선언되었을때 그 함수의 스코프를 결정하는 환경이라고 할수있겠죠??

쉽게
예제를 한개 봐보겠습니다!

function Func1(){
	let a=10;
    let Func2(){console.log(a)};
    Fun2()
}

Func1() //10

자 이제 어떤의미인지 알겠죠?
한 함수내부에서 정의된 함수가 있으면 외부의 함수를 호출만해도 충분히 내부의 함수를 같이 사용할수있다는것이죠
이렇게 렉시컬 스코프에 대해서 알았으니

다시 클로저함수로 돌아와서
정의에 대해서 살펴볼까요?

이렇게 볼수도 있겠네요
클로저는 반환된 내부함수가 자신이 선언됐을때의 환경인 스코프를 기억하여 자신이 선언됐을때의 환경밖에서 호출되어도 그 환경에 접근할수 있는 함수라고도 할수 있겠죠

이것을 조금더 쉽게표현하면
클로저란 : 자신이 생성될때의 환경을 기억하는 함수라고 이해하시면 훨씬 이해가 쉬우실것같습니다!

자 이제 기본적인 클로저의 개념과 어떻게 작동하는지 알았으니
이것에서 파생된 개념들에 대해서 알아볼까요
바로
HOC와 HOF가 있는데요!
HOC,HOF 가 무엇이고 이것들은 어떻게 다른지 같이 알아보도록 하겠습니다!

첫번째로 HOC가 무엇인지 봐볼까요??

2.HOC란?

HOC는
higher order component 의 줄임말로
컴포넌트를 가져와 새 컴포넌트를 반환하는 함수라고 할수 있습니다!
즉 컴포넌트가 UI를 호출한다고 하면
고차 컴포넌트는 컴포넌트를 호출한다고 할 수 있습니다!

쉽게 말해서
저희가 이전에는 container와 presenter 라는 폴더구조를 사용해서 코딩을 했었고
container에 presenter를 호출해서 사용했던것과 같이
컴포넌트를 호출할수 있다는것이죠

이렇게 된다면 특정 컴포넌트가 실행되기전에 특정기능을 부여할수 있게 됩니다!

자 이번에 볼것은

3.HOF

HOF입니다!

자 HOF의 경우에는 HOC 와 어떤차이가 있을까요??

개념자체는 비슷합니다
HOC가 컴포넌트를 호출했다면 HOF는 함수를 호출합니다!

이렇게 되면 어떤함수에 특정 이벤트를 넣거나 원하는대로 작성하기 훨씬 간편하겠죠

그래서 함수형 컴포넌트에서 주로 사용하는 방식이 바로 HOF입니다
둘의 차이는 거의 없으나 호출하는게 함수냐 아니면 컴포넌트인가의 차이가 있다는것 다들 아시겠죠??

오늘의 포스팅은 여기까지입니다!

부족한 지식이지만 조금씩 채워서 바다같이 넓은 지식을 가지시길 바랍니다!

그럼

밸~바