# HoF

42개의 포스트
post-thumbnail

[React] HOC vs HOF

HOC ( High Order Component ) HOC의 중요도가 높았지만 현재는 낮아지고 있고 리액트내에서는 대체할 수 있는 Hook이 나왔다고 합니다. 리액트에서 컴포넌트 안에 있는 로직을 다시 재활용 할 수 있는 어드밴스드한 기술이라고 정의되어 있습니다 리액

2022년 10월 22일
·
0개의 댓글
·

TS-HOF

이번에 할내용은 HOF!!!HOF는 Higher Order Function 이라고 한다. 개념은 클로저로부터 확장된 개념이다.HOF는 최종 return 값이 JSX인지 JSX가 아닌지로 구분한다.특정 버튼을 클릭했을때 , id 값을 넘겨주기 위해 event.target

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

HOC, HOF

웹사이트를 방문하면 로그인을 한사람과 안한사람이 볼 수 있는 페이지가 따로 존재하는 경우가 있다. 이는 권한분기가 이뤄진 것이다.로그인에 등급을 매기면, 운영자로 로그인 한 사람, 판매자로 로그인 한 사람, 거래처 사장님으로 로그인 한 사람 등 다양하게 권한을 분리할

2022년 8월 26일
·
0개의 댓글
·
post-thumbnail

24일차) [REACT/JS] hoF/ useApolloClient

24일차 배운 내용들(HoF,useApolloClient / react-hook-from,yup)을 나눠서 작성HoF(Higher order Function)useApolloClient react-hook-formyupHOC와 거의 비슷하지만 리턴 컴포넌트를 하면 Ho

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

로그인 프로세스 (Front-End)

위와 같은 이미지, 많이 익숙하신가요? 우리가 사용하고 있는 웹 페이지들에서 흔히들 볼 수 있는 로그인 페이지입니다. 로그인은, 웹 사이트에 회원가입 등으로 저장되어 있는 사용자 정보로 접속하려고 하는 요청을 검증하고 ( 아이디 또는 이메일, 비밀번호 체크 ) 검증이 완료되면 해당 사용자의 정보 데이터를 가지고 오는 과정입니다. 프론트엔드에서...

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

[기술면접] HOC, HOF

고차 컴포넌트 = Higher Order Components(HOC) 한마디로 말하면 HOC는 다른 컴포넌트를 감싸는 리액트 컴포넌트다.

2022년 7월 1일
·
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

고차 함수(Higher Order Function)에 대하여

함수형 프로그래밍(functional programming)의 첫걸음

2022년 6월 10일
·
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개의 댓글
·
post-thumbnail

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개의 댓글
·

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개의 댓글
·
post-thumbnail

React Currying

커링은 HOF 중에서 요소가 여러 개인 함수의 요소 중 일부를 고정시켜 새로운 함수를 만드는 방법이다.hello, cat 두개의 요소를 사용하는 HOF를 만들었다.그 다음 hello를 "안녕하세요"로 고정시켜주는 sayHello함수를 만들었다.그러면 이렇게 hello는

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

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개의 댓글
·