# HoC

91개의 포스트
post-thumbnail

react query 커스텀 훅으로 로그인 유지하기 (with. HOC - 고차 컴포넌트)

유저가 로그인하게 되면 헤더에 있는 로그인 / 회원가입 이 마이페이지 / 로그아웃 으로 바뀌어 보여야 했다.처음 헤더에 넣어 바로 유저 상태를 유지했는데, 헤더가 없다면 어떻게 하겠냐는 물음에 제대로 답하지 못했다.헤더에 넣기보단, 유저 상태를 유지해야하는 페이지에 훅

2023년 5월 31일
·
0개의 댓글
·

[React] HOC의 대체 패턴과 API

기존 컴포넌트를 확장하여 기능을 추가하거나 변경하는 데 사용되는 React의 기능입니다. React 초기 버전에서 HOC는 로직의 재사용을 위한 방법으로 인기가 있었지만,최근에는 일반적으로 사용되지 않습니다.최신 React 버전에서는 HOC의 대안으로 Hook 또는 다

2023년 5월 29일
·
0개의 댓글
·

고차 컴포넌트

고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다.컴포넌트의 재사용성을 위해 사용한다.다음과 같이 HOC 컴포넌트의 파라미터로 래핑될 컴포넌트를 넣어서 사용한다.const EnhancedComponent = higherOrderComponent(Wrap

2023년 5월 9일
·
0개의 댓글
·
post-thumbnail

[TIL 0413] 권한분기 / HOF & HOC/ 스코프체인과 클로저

💡 권한분기 >로그인 인증이후에는 로그인 한 사람과 안한 사람으로 권한 분기가 이뤄진다. 스택 상자쌓인 걸로 생각! 위에서부터 꺼내는 방법 First In Last Out FILO 필로! 큐 줄서는 것 앞에서부터 순서대로 First In First 피포!

2023년 4월 14일
·
0개의 댓글
·
post-thumbnail

[TIL] 로그인 2

📒 오늘 공부한 내용 🔍수업목차 >[23-1] 새로고침 이후 재접속 과정 [23-2] 브라우저에 accessToken 저장하기 [23-3] Next.js의 렌더링 방식 [23-4] 권한분기 [23-5] 권한분기를 진행하기 위한 필요한 사전지식 [23-6] 함수를 리

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

Learn 권한 분기, Closure, HOC&HOF

권한분기(스택, 큐, 스코프 체인, 클로저, 호이스팅)함수를 리턴하는 함수 HOFHOC(Higher Order Component)&withAuth로그인 인증 이후에는 이에 따른 권한 분기가 이루어지는데 작게는 로그인을 한 사람과 하지 않은 사람부터 로그인에 등급을 매기

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

2023. 4. 12 ~ 13

index 로그인(역사, JWT 로그인) 단방향 암호화(해싱), 양방향 암호화 토큰을 같이 보내주는 방법 JWT 토큰과 조작 불가능성 이해(회원가입, 로그인 진행, JWT이상한점) 로그인과 Recoil연결 새로고침 이후 재접속 과정의 이해 브라우저에 accessTok

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

HOC(Higher-Order Component, 고차 컴포넌트)

HOC(Higher-Order Component)는 컴포넌트를 받아서 새 컴포넌트를 반환하는 함수로 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. React API 일부가 아닌, 구성적 특성에서 나오는 패턴입니다.

2023년 3월 9일
·
0개의 댓글
·

hof,hoc

HOC ==> 실행할컴포넌트보다 먼저 실행되는 컴포넌트.이 컴포넌트에 useEffect라는 로직을 집어넣어 실행을 원하는 컴포넌트의 실행전 HOC컴포넌트의 useEffect가 먼저 실행되어 권한체크.HOF ===>함수 안에서 실행되는 함수event.target.id 부

2023년 3월 6일
·
0개의 댓글
·
post-thumbnail

Higher Order Component(HOC) 활용 제대로 하기

리액트 공식 문서에 따르면 고차 컴포넌트는 "컴포넌트 로직을 재사용하기 위한 React의 고급 기술"이라고 표현한다.쉽게 표현하자면 기존 컴포넌트는 props를 받아 UI를 변환하는 역할을 한다면, 고차 컴포넌트 같은 경우에는 컴포넌트를 가져와 새 컴포넌트를 반환하는

2023년 2월 27일
·
0개의 댓글
·
post-thumbnail

함수를 리턴? HOF (feat.HOC)

함수를 리턴하는 함수 HOF에 대해 알아보자.위와 같은 코드가 있을 때 함수 안의 함수 function item을 콘솔에 출력하고 싶으면 어떻게 해야할까?생각보다 간단하다! com()() 으로 작성해주면 콘솔에 Mac과 item이 모두 출력할 수 있다.파라미터(매개변수

2023년 2월 20일
·
0개의 댓글
·
post-thumbnail

React HOC vs HOF

(aaa())()aaa를 실행한 결과값을 다시 실행한다.이러면 bbb를 실행한 것과 같다. aaa()()로 줄여 사용이 가능하다. aaa가 실행되고 bbb가 실행된다. aaa를 bbb보다 먼저 실행되기 때문에 Higher order Function(먼저 실행되는 함수)

2022년 12월 22일
·
0개의 댓글
·
post-thumbnail

고차함수

고차 함수는 함수를 인수로 전달받거나, 함수를 반환하는 함수를 말한다.고차함수는 함수형 프로그래밍의 일종으로, 자바스크립트를 함수형 프로그래밍에 알맞은 언어로 만들어주는 특성이 바로 자바스크립트가 고차 함수이다.이 고차함수를 이해하기 위해선 함수형 프로그래밍과 일급객체

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

React.memo

React에서 제공하는 React.memo는 HOC, 고차 컴포넌트다. 고차 컴포넌트란, 어떤 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환해주는 함수다.리액트에서 컴포넌트는 Props, 또는 State에 의해서 자주 렌더링된다. 컴포넌트가 복잡한 로직을 포함하고 있

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

23day - Diffing, Hydration, HOC, HOF

변수에 accessToken을 넣고 새로고침을 하면 로그인 정보가 모두 날아간다. 새로고침은 브라우저에서 해당 주소로 다시 엔터를 친 것과 같아서 이전에 그려졌던 state 변수들이 사라진다. 브라우저에 저장해야 새로고침을 해도 사라지지 않는다. 브라우저 저장공간은 여

2022년 12월 3일
·
0개의 댓글
·
post-thumbnail

HOC - React

React HOC

2022년 12월 1일
·
0개의 댓글
·
post-thumbnail

[React] accessToken 저장, 권한분기, HOC,HOF

새로고침 후에도 로그인이 되어있게 하려면 refresh token을 사용해야 하지만 아직 배우기 전이기 때문에 임시로 localStorage에 저장하는 방법이 있다.localStorage에는 객체형태 데이터를 넣을 수 없기 때문에 JSON.stringify를 이용해 객

2022년 12월 1일
·
0개의 댓글
·

[React] HOF / HOC

HOF > High Order Function, 더 높은 순위에 있는 함수, 함수를 리턴하는 함수 aaa가 bbb보다 먼저 실행되기 때문에 더 높은 순위에 있는 함수(HOF)라고 할 수 있다. HOC > High Order Component , 상위에 있는 컴포넌

2022년 12월 1일
·
0개의 댓글
·
post-thumbnail

💻 고차 컴포넌트(HOC)(feat. 리액트 공식문서)

> ⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. 고차 컴포넌트는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술이다. 고차 컴포넌트는 React API의 일부가 아니며, React의 구성적 특

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

[React]Memoization 알아보기(Profiler, useCallback, usememo) (1)

메모제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술전체는 Memo Componentitem을 감싸는 comments각 아이템들을 comment

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