220413_TIL

오늘의 목표

1. NextJs 렌더링 원리 diffing/hydration
2. closure
3. HOC/HOF

1. 브라우저 스토리지
   개발자도구 - 애플리케이션

로컬스토리지 - 영구적으로 저장
중요한데이터 저장하는 건 좋지 않음

세션스토리지 - 임시적으로 저장

로컬스토리지에 저장시켜두고 새로고침했을 때 로컬스토리지에 있는 access토큰을 글로벌스테이트의 리코일스테이트에 다시 넣어줘야됨

아폴로 세팅에 localstorage를 만들고 새로고침하면
localstorage가 없다고 뜸

2. closure

function aaa(){
return function bbb(){
console.log("안녕하세요")
}
}

aaa()
ƒ bbb(){
console.log("안녕하세요")
}

function aaa(){
return function bbb(){
console.log("안녕하세요")
}

}

(aaa())()
VM672:3 안녕하세요

bbb는 이름이 상관없음
함수 내부의 리턴되는 함수의 이름은 의미가 없음

function aaa(){
let apple = "이건 사과입니다"
return function bbb(){
let banana = "이건 바나나입니다"
console.log("안녕하세요")
console.log(apple)
console.log(banana)
}

}

aaa()()
VM1609:5 안녕하세요
VM1609:6 이건 사과입니다
VM1609:7 이건 바나나입니다

내부함수에서 바깥쪽 외부함수의 변수를 접근 할 수 있다.
why? scopechain에 의해서

이 영역을 closure이라고 한다

function aaa(apple){

return function bbb(banana){
   
    console.log("안녕하세요")
    console.log(apple)
    console.log(banana)
}

}

aaa('이건 사과에요')('이건 바나나에요')
안녕하세요
VM1892:6 이건 사과에요
VM1892:7 이건 바나나에요

스택
하나씩 들어와서 쌓고 뺄 때는 늦게 들어온 거 부터 뺌
선입후출
first in last out
== Last In First Out (LIFO구조)

queue
하나씩 들어과서 쌓는데 뺄 때는 가장 처음 들어온거 부터 뺌
선입선출
First In First Out(FIFO구조)
== Last In Last Out

3. 권한분기

useEffect(() => {
if (!localStorage.getItem("accessToken")) {
alert("로그인 후 이용가능 하세요");
router.push("/23-04-login-check");
}
}, []);
근데 이러면 로그인 후 이용하는 페이지 전부다 입력을 해줘야 함
이러면 매우 비효율적이고 나중에 유지/보수가 힘듬

HOC라는 개념이 필요한데 이는 컴포넌트 실행전에 먼저 실행되는 컴포넌트를 의미함
Higher Order Component

1. container
   export default function Aaa(){
   return <>{Hoc(Bbb)({qqq:'철수'})}</>
   ↓

2. Hoc
   //Bbb
   export default function Hoc(Component){
   return function(props){
   //qqq:철수

   로직작성 가능
   return <Component {...props} />	
   }

   }
   Hoc(Component)({qqq:"철수"})
   ↓

3. presenter
   export default function Bbb(props){
   retrun

   이름은 {props.qqq}입니다.
   
   }

1,3 번만 있어도 똑같은 거지만
2번의 차이는 중간에 로직을 작성할 수 있음
그래서 2번만 임포트하면 권한을 분기할 수 있음

사용법

1. container
   export default function Aaa(){
   return
   ↓

2. Hoc

const Hoc = (Component) => (props) => {
로직작성

return <Component {...props} />
}

export default Hoc
↓

3. presenter
   function Bbb(props){
   retrun
   이름은 {props.qqq}입니다.
   
   }
   export default Hoc(Bbb)

보통 Hoc는 with라고 이름 많이 지음

HOF

const onClickChild = (el) => (event) => {

}