권한분기를 위해서 로그인을 했을 때 accessToken을 localStorage에 담기위해 app.js에 useEffect를 사용해서 전역변수로 사용한 accessToken을 담아준다.
담기는 이유는 useEffect는 pre-rendering을 하고 browser에서 다시 그려줄 때 실행되기 때문에 문제없이 localStorage에 담긴다.
권한분기를 위해서 useEffect를 이용해 검증하는 부분을 만든다.
로그인을 하고 넘어가는 페이지에서 만약 accessToken이 없으면 경고창으로 메시지를 띄어주고 다시 로그인창으로 가게 하는 로직이다. 만약 accessToken이 있다면 reuturn에 {로그인을 한 사람}님 환영합니다! 라는 텍스트가 띄어진다.
여기서 서비스가 좀 더 커져서 로그인 검증 해야되는 부분이 많아진다면 이걸 하나하나 다 넣어줘야되는데 이걸 따로 저장해서 import하는 방식이 좀 더 효율적이고 HOC,HOF를 알아야한다.
컴포넌트의 따라 나뉘는데
class component를 사용하면 HOC(High order component)
function component를 사용하면 custom hooks or HOC도 쓴다.
오늘은 HOC를 실습할건데 하기전에 Closure의 개념을 알아야한다.
서버를 키면 aaa함수가 실행되고 안에 있는 bbb함수도 자동으로 실행된다.
aaa에서 apple이라는 변수에 10을 넣어줬고, bbb라는 함수에 apple=5를 넣어줬다 이상태에서
bbb안에 콘솔banana와 apple을 했을 때 값은 각각 20과 5가 나온다. 먼저 bbb라는 함수 안에 스코프에서 값을 찾기때문에 그런데 만약 bbb안에 apple이 없었더라면 그걸 감싸고 있는 부모함수에서도 apple이 있는지 참조를 한다. 이 과정을 스코프체이닝이라하고 사진에서 bbb안에 apple이 없었더라면 콘솔엔 10이 찍혔을 것이다.
여기서 bbb함수가 돌아갈 때 bbb는 local Scope라 하고 그걸 감싸고 있는 Scope를 aaa를 Closure라 하고 그 밖에 script전체를 Global Scope라고 한다.
여기서 bbb 아래에 있는 qqq라는 변수도 Closure Scope이다.
위에있는 것만 scope가 아니라 아래에 있는 것도 참조할 수 있는 것이다.
그럼 bbb안에 또 함수가 있으면 어떻게 될까?
closure가 2개가 된다.
ccc에서 console.log()에 값을 찍었을 때 안에 없으면 bbb에서 찾고 없으면 aaa찾고 없으면 global Scope에서 찾는다!
HOC / HOF
두 개의 차이는 심플하게 얘기하면 HOC는 return 부분에 태그가 있는거고,
HOF는 그 외의 것이다.
aaa안에 bbb까지 호출시켜주는 방법이다.
aaa()로 aaa를 호출해주고 그 뒤에있는 ()가 bbb를 호출해준다.
여기서 aaa를 bbb보다 더 먼저 실행되는 함수 High order function라고해서 약자로 HOF라고한다.
ex)
여기서 화살표 함수로 바꾸게 되면 모양은 이렇다.
- 호출을 할 때 bbb라는 이름은 안쓰니깐 생략
- 중괄호와 return사이에 아무것도 안 써줬으니 생략
이제 다시 권한분기로 넘어가면 aaa컴포넌트를 켜주면 bbb컴포넌트를 보여주는데 HOC가 감싸져있어 HOC가 먼저 실행되고 그 안에 있는 로그인체크 부분이 실행되면서 로그인이 안돼있으면 다시 다른 곳으로 보내는 식으로 로직을 짤 수 있다.
여기서 먼저실행될 컴포넌트에 return <>이 있으니 HOC라고 부른다.
사용할 땐 이런 방식으로 쓰는게 일반적이다.
HOC를 Export default를 해줘서 Aaa넘겨주면 import 해줄때 이름을 바꿀 수 있기 때문이다.
