퍼어어엉션 안에서 또다른 function을 실행시켜 리턴되는 함수!

aaa 라는 펑션 안에는 apple=10이 변수로 되어 있고 역시 bbb라는 함수에도 banana 변수가 선언되어 있습니다.
실생하게되면 apple -> banana 순서대로 확인되어집니다.

여기서 그냥 한꺼번에 실행되구나! 라고 생각하시면 안됩니다!!
함수안에서 외부에 있는 지역 함수로 접근할수가 있습니다! 이점이 요점 입니다!
=> 이 개념을 사용해서 HOC를 만든다

HOC vs HOF

HOC는 Higher Order Component, HOF는 Higher Order Function 이라고 합니다.

이 두 개념은 위의 클로저로부터 확장된 개념입니다.

자 로그인 페이지 입니다!

로그인하면서 스토리지에 accessToken을 저장시켜줍니다!
물론 key , value값 ! 입니다
로그인성공~!!

일반적으로 이제 웹페이지상 로그인이 이후 유저만 접근할수 있는 페이지로 이동을 하겠죠 ? 하지만 이 사람이 진짜 토큰을 가지고 있는지 확인할 필요가 있잖아요!
자 봅시다

여기서 토큰 값을 가져오면서 토큰이 비어 있으면 로그인체크 페이지로 이동하게 했습니다 .
자 이 기능을 hoc를 이용해서 하게 되면 없어집니다 !! 뾰롤로로로롱~~

export 보시면 withAuth 요놈을 임포트 해서 가져오고 있습니다

withAuth 는 어떤놈이냐 약간 재밋게 말씀드리면 로그인하는곳이 남자친구 성공페이지가 여자친구라고 하면 withAuth는 약간 여자친구의 오빠 같은 녀석입니다ㅋㅋㅋㅋㅋ 남자친구가 여자친구집에 가기전에 오빠가 검사를 먼저 하는거죠 ㅋㅋㅋㅋ 이놈이 올바른놈인가 혹시 이상한사람 아닌가.. ㅋㅋㅋ 전 이렇게 해석하니까 금방 머리에 들어오더라구요 ㅋㅋㅋ

리엑트 하면서 가장 어려운부분이 구조놔누고 뭐 막하고 이렇게 아고 저렇게 하고 하면서 어지러웠는데 이렇게 생각하니까 금방 정리되더라구요!

HOF

HOF 역시 HOC와 비슷합니다. 단지 최종 return 값이 JSX인지, JSX가 아닌지로 구분됩니다.

Component대신 Function이려면 최종으로 return 되는 값이 JSX가 아닌 일반 함수이면 되겠죠?

이때 까지 id값을 넘겨주기위해 onChange함수를 만들어서 event.target.id를 사용했습니다 서비스가 소규모면 상관이 없겠지만 유저사용자도 많아지고 점점 커지면 과부하가 일어나지 않을까요? 여러사람이 한꺼번에 들어와서 활동을 한다면 ?? 이걸 최적화 시키기위해 사용하는게 hof입니다 hof는 hoc보다 어렵진 않은데 개인적으로는 더 햇갈릴수 있다고 생각이 되요 왜냐면 태그에 onClick으로 값을 지정해주는데 이부분을 값으로 가져오면서 변수의 선언이나 이름등이 오타가날 확률도 적지 않을거 같고 다른걸 지정해줄수도 있기 때문이라고 생각해요 그리고 이런 오류들을 찾는게 가장 어렵구요.. 일단 예시를 봅시당

예시를 보면 진짜 간단합니다 이게 다애요 실제로 배포를 하게 되면다면 el?._id 이런식으로 내려줄텐데 음.. 이게 맞나?? 이부분은 확인을 해봐야겠군요.. 하하하