# HoC

59개의 포스트
post-thumbnail

HOC(고차함수 사용 예시)

이번에 HOC의 사용방법에 대해서 알게 되었는데 기록을 남기고 싶어 글을 올립니다.일단 고차함수란 파라미터를 함수로 받거나 return 값이 함수일 경우고차 함수라고 합니다.이 코드를 보면 pageNaming은 return으로 Component라는 컴포넌트를 반환하고

4일 전
·
0개의 댓글
post-thumbnail

React HOC vs HOF

HOC는 상위에 있는 컴포넌트로 다른 컴포넌트보다 먼저 실행되는 컴포넌트라고 생각하면 된다.다른 컴포넌트보다 먼저 실행되게 하려면 어떻게 해야할까?권한 분기에서 사용자에 따라 다른 페이지를 보여주고 싶다 했을 때 예를 들어 로그인을 한 유저와 하지 않은 유저가 있을 때

2022년 6월 13일
·
0개의 댓글

HOC, HOF

High ordered Component, High ordered Function상위 권한을 갖고있는 컴포넌트, 함수 이다.컴포넌트를 가져와 컴포넌트를 반환하는 함수이다.컴포넌트는 props를 UI로 변환하는 반면, 고차 컴포넌트는 새로운 컴포넌트를 반환한다. 수업시간

2022년 6월 11일
·
0개의 댓글
post-thumbnail

코드캠프 FE 23일차 - TIL(Diffing/ Hydration,Closure,HOC/HOF)

next.js 렌더링? >> Diffing/ Hydration자바스크립트에도 이런것이? >> Closure먼저 실행해줘! >> HOC/HOF로그인 토큰 유지시키기권한분기를 어떻게 전환시키는지브라우저의 로컬 스토리지에 넣어놓을거임\\로컬스토리지에 넣으면 새로고침 해도 사

2022년 6월 9일
·
0개의 댓글
post-thumbnail

React HOC vs HOF

HOF (Higher-Older Function) HOC는 리액트에서 만들어낸 새로운 기술이라기 보다는 함수형 프로그램에서 사용하는 개념인 HOF와 유사하다. HOF는 함수를 인자로 받아 새로운 함수를 반환하는 함수이다. fx를 인자로 받아 fy를 반환하는 함수로 하수가 일급객체인 언어에서 자주 사용되는 패턴이다. 자바스크립트도 마찬가지다. Loda...

2022년 6월 9일
·
0개의 댓글

30) React HOC vs HOF

useEffect를 이용하여 권한분기 설정해주기는 간단하게 적용할 수 있다.하지만 필요한 모든 페이지 마다 따라 붙여야 한다.그렇기 때문에 수정할 때 모두 다 바꿔줘야하는 어려움이 생긴다.그래서 로그인확인을 적용해주는 공통 컴포넌트를 만들고, 원하는 페이지가 실행되기

2022년 6월 9일
·
0개의 댓글
post-thumbnail

Day-23,26 권한분기(Diffing, Hydration, HOC vs HOF)

로그인을 하고 새로고침을 하는 순간 정보가 사라지는 이유는 결론부터 말하면 토큰을 변수에 담아놨기 때문에 새로고침을 하는 순간 초기화가 되면서 프론트엔드에서 html, css, js까지 전부 처음부터 받아와지기 때문에 토큰도 사라지게 된다.

2022년 6월 9일
·
0개의 댓글
post-thumbnail

23) 목요일

Algorithm Self Study, HoC, HoF, closure, diffing, hydration, Algorithm Class

2022년 6월 9일
·
0개의 댓글
post-thumbnail

[React] Conditional Rendering

Conditional rendering is a term to describe the ability to render different user interface (UI) markup if a condition is true or false.리액트에서 특정 조건에 따라

2022년 5월 19일
·
0개의 댓글

04 / 20 / 2022

HOC 관련질문1\. 첫번째 예시에서 해당 부분이 제어권을 가진것이고, withSubscription이 고차컴포넌트가 되는게 맞는지?CommentListWithSubscription, BlogPostWithSubscription도 결국 렌더안에서 쓰여야 하지 않나? 렌

2022년 4월 20일
·
0개의 댓글

React Currying

커링 기법은 인자가 여러개인 함수의 일부 인자를 고정시키는 새로운 함수를 만드는 기법이다.이를 이해하기 위해서는 HOC, HOF가 뭔지 알고 있어야한다.HOC, HOF에 관한 글다음 코드를 보자word와 name이라는 두 개의 인자를 받아 출력하는 함수이다.이 함수에

2022년 4월 17일
·
0개의 댓글
post-thumbnail

React HOC vs HOF

HOC는 Higher Order Component,HOF는 Higher Order Function으로두 개념은 클로저로부터 확장된 개념이다.클로저에 관한 글HOC는 대표적으로 페이지의 권한을 처리할 때 사용한다.다음과 같이 useEffect 로 토큰을 검사하여 페이지의

2022년 4월 17일
·
2개의 댓글

HOC vs. HOF

HOC: Higher Order Component페이지의 권한을 처리할 때 사용한다.ex) 회원 공개 페이지UserPage가 실행되기 전, withAuth라는 상위 컴포넌트가 먼저 실행된다.HOC 컴포넌트(아래그림)HOF: Higher Order Function컴포넌트

2022년 4월 17일
·
0개의 댓글

JS Closure && HOC vs HOF

퍼어어엉션 안에서 또다른 function을 실행시켜 리턴되는 함수!aaa 라는 펑션 안에는 apple=10이 변수로 되어 있고 역시 bbb라는 함수에도 banana 변수가 선언되어 있습니다. 실생하게되면 apple -> banana 순서대로 확인되어집니다.여기서 그냥

2022년 4월 17일
·
0개의 댓글

권한 분기

사이트를 운영하면서 사용자에게 서비스를 제공할 때시스템의 정상적인 운영을 위해사용자의 권한별로 다른 서비스를 제공하거나, 접근을 제한해야 될 때가 있다.만약 사용자가 관리자라면 관리자 페이지에 접근이 가능해야하고,반대로 관리자가 아니라면 접근이 제한되어야한다.또한 사이

2022년 4월 16일
·
0개의 댓글
post-thumbnail

HOC/HOF

Aaa 컴포넌트에 Bbb 컴포넌트를 import 시키고있다. Bbb 컴포넌트에서는 props로 "철수"를 내려받고 있다.함수형으로 이름을 바꾸고 props 또한 변수 이름이기 때문에 어떤 걸로 바뀌어도 상관없다.Closure에 의해 Bbb 컴포넌트가 실행되기 전에 Ho

2022년 4월 15일
·
0개의 댓글
post-thumbnail

권한분기 / HOC / HOF

HOC HOC는 Higher Order Component의 줄임말로 리액트 컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수이다. HOF

2022년 4월 14일
·
0개의 댓글

권한분기, Closure, HOC, HOF

권한분기 사이트마다 관리자 페이지, 배민 같은 경우는 사장님용 페이지, 카카오택시같은 경우는 기사님용 페이지가 따로 있다. 페이지별로 로그인 한 사람에 따라 권한을 분리해 줄 수 있다. Closure 내부 함수에서 외부 함수의 지역변수에 접근하는 것을 의미 HOC(Higher Order Component) 페이지 권한을 처리할 때 사용 회원공개 페이지가...

2022년 4월 13일
·
0개의 댓글
post-thumbnail

React HOC vs HOF

클로저를 바탕으로 만들어진다.HOC는 Higher Order Component위 아래는 같은 결과가 나온다.Aaa컴포넌트는 리턴 해주는 Bbb는 이름을 바꿔줘도 된다withAuth 가급적 사용하기 먼저 실행 컴포넌트에는 권한 분기(검사하는 로직 - 로그인 여부체크(us

2022년 4월 13일
·
0개의 댓글
post-thumbnail

23일) 브라우저에도 저장공간이 있대!.. localStorage/Next.js 렌더링의 Diffing / Hydration/권한분기/Closure/HOC / HOF code camp fe 6기

'어려움' 문제를 내가 스스로 생각해서 처음 맞췄다!!!!!!!!!!!!!!!오늘 등원할때 궁둥이에 찝찝한게 묻어서 기분이 안좋았었는데 문제 잘푸려고 그랬나보다. 너무너무 행복하다 ! 알고리즘 풀이접근법을 잘 몰랐던 내가 이렇게 발전할 수 있는 이유는1.RunJS를 켜

2022년 4월 13일
·
0개의 댓글