# HoC

85개의 포스트
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개의 댓글
·

[Next] Closure / HOC / HOF

로그인 인증 후에는 권한분기가 이루어짐로그인한사람vs로그인하지않은사람추가적으로 로그인에 등급을 매기면, 운영자로 로그인한 사람, 판매자로 로그인한 사람, 거래처 사장님으로 로그인한 사람 등등 다양하게 나뉨출입구가 하나인 우물형태의 데이터구조스택은 출입구가 하나기 때문에

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

Vue Mixin vs. HOC 그리고 Composition API

Vue Mixin과 HOC, Composition API를 공부한 간략 후기

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

[React] HOC vs HOF

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

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

HOC, HOF

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

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

React Memoization

React Memoization

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

23일차-2) [React/JS] 권한분기 / 스코프체인 / 클로져 / HOC

권한분기 > 당연한 말이지만 모든 사이트에는 각자의 권한이 있다. 로그인/비로그인, 관리자, 판매자 등등 다양한 사람들이 사용할 수 있는 권한이 부여되어 있음. 권한분기를 진행하기 위해선 필요한 사전지식이 있는 데 그것이 바로 스택큐 이다 스택 > 출입구가 하나이기

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

콜백 함수(Callback Function)

콜백 함수(Callback Function)란? > > 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수(Callback Function)라고 하며, 매개 변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수(HOF:Higher-Or

2022년 8월 2일
·
0개의 댓글
·