HoC 04 / 20 / 2022 HOC 관련질문 첫번째 예시에서 해당 부분이 제어권을 가진것이고, withSubscription이 고차컴포넌트가 되는게 맞는지? CommentListWithSubscription, BlogPostWithSubscription도 결국 렌더안에서 쓰여야 하지 않나? 렌더메서드 안에서 고차컴포넌트 사용하지 말라고 되어있음 withSubscription 컴포넌트 안에서, WrappedComponen... react.jsHoCHoC 23일) 브라우저에도 저장공간이 있대!.. localStorage/Next.js 렌더링의 Diffing / Hydration/권한분기/Closure/HOC / HOF code camp fe 6기 알고리즘 풀이접근법을 잘 몰랐던 내가 이렇게 발전할 수 있는 이유는 물론 오늘의 로그인 관련 내용은 임시로 적용시켜 줄 수 있는 내용입니다! 이를 해결하기위해 우리는 브라우저 저장소를 사용할 수 있었죠? localStorage.setItem(“key”,value)과 .getItem(“key”,value)을 활용해 손쉽게 넣어주고 불러줄 수 있었죠?! 그래서 우리가 사용한 것이 HOC(High... HoClocalStorage.setItemuseEffectaccesstokenclosurelocalstorage권한분기스택큐hydrationHighOrderComponentHoFdiffingwithAuthHighOrderComponent React Currying 커링 기법은 인자가 여러개인 함수의 일부 인자를 고정시키는 새로운 함수를 만드는 기법이다. 이를 이해하기 위해서는 HOC, HOF가 뭔지 알고 있어야한다. 다음 코드를 보자 word와 name이라는 두 개의 인자를 받아 출력하는 함수이다. 이 함수에 커링을 적용해보자. 2개의 인자를 받던 함수가 1개의 인자를 받는 함수 2개로 쪼개진 것을 볼 수 있다. 또한 첫 번째 인자 word를 "안녕"... ReactHoCHoFTILHoC React HOC vs HOF 다음과 같이 useEffect 로 토큰을 검사하여 페이지의 권한을 처리하게되면 여기서 useEffect문 만 따로 뽑아서 컴포넌트로 만든 후 import하여 사용하면 그렇다면 이 useEffect문을 따로 뽑아서 컴포넌트로 만드는 즉 HOC(Higher Order Component)를 만드는 작업을 직접 해보자! 좌,중간,우측 컴포넌트로 칭하겠다. 좌측 컴포넌트에서 이메일과 비밀번호를 입력하... HoCJavaScriptTILReactHoFHoC useCallback vs useMemo(feat. React.memo) 프로젝트를 보다가 useCallback, useMemo, React.memo를 봤는데 정확한 개념을 이해하지 못해서 찾아보기로 했는데 먼저 메모이제이션(memoization)에 대해 알아야 한다 memoization이란 기존에 수행한 연산의 결과 값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 기법으로 중복 연산을 피할 수 있다는 장점이 있다 useCallback의 deps가 변하... useCallbackHoCuseMemoReact.memoHoC React.forwardRef ref, key와 같은 특별한 키워드는 props으로 상속할 수 없다 하지만 ref를 상속해야하는 경우가 생긴다면 어떻게 해야할까? 프로젝트에 React.forwardRef가 있어 이를 찾아봤다 ref를 전달 받아 하위 컴포넌트에 전달할 수 있게 해준다 위 코드를 보면 React.forwardRef의 2번째 arg로 상위 컴포넌트에서 ref를 전달받은 것을 알 수 있다 전달받은 ref가 bu... ref inheritHoCReact.forwardRefHoC [KDT]FCFE - 8주3일 React Practice HOC HOC = function(컴포넌트) { return 새로운 컴포넌트;} withRouter(컴포넌트) -> router에 의해 호출되지 않아도 match, location, history 에 접근할 수 있도록 한다. ( React.forwardRef 사용 ) inputRef = React.createRef(); mount 된 이후 참조되면 사용할 수 있다. Hooks & Contex... useStateHoCuseEffectuseHistoryuseMemouseReducerhooksHoC HOC라고 읽고 Higher Order Component라고 쓴다 줄여서 HOC라고 한다. 리액트에서 제공하는 특별한 기능은 아니다. 다만 리액트 컴포넌트의 특성을 이용해서 컴포넌트를 손쉽게 재사용가능하기 위한 패턴이라고 보면 될것이다. 이제 간단한 count 컴포넌트 2개를 만들것이다. 하나는 ClickCount로 버튼을 클릭하면 count가 증가하고 다른 하나의 컴포넌트는 HoverCount로 마우스가 올라가면 count가 증가한다. 이 두개의 컴포넌트... HoCwithCountHoC
04 / 20 / 2022 HOC 관련질문 첫번째 예시에서 해당 부분이 제어권을 가진것이고, withSubscription이 고차컴포넌트가 되는게 맞는지? CommentListWithSubscription, BlogPostWithSubscription도 결국 렌더안에서 쓰여야 하지 않나? 렌더메서드 안에서 고차컴포넌트 사용하지 말라고 되어있음 withSubscription 컴포넌트 안에서, WrappedComponen... react.jsHoCHoC 23일) 브라우저에도 저장공간이 있대!.. localStorage/Next.js 렌더링의 Diffing / Hydration/권한분기/Closure/HOC / HOF code camp fe 6기 알고리즘 풀이접근법을 잘 몰랐던 내가 이렇게 발전할 수 있는 이유는 물론 오늘의 로그인 관련 내용은 임시로 적용시켜 줄 수 있는 내용입니다! 이를 해결하기위해 우리는 브라우저 저장소를 사용할 수 있었죠? localStorage.setItem(“key”,value)과 .getItem(“key”,value)을 활용해 손쉽게 넣어주고 불러줄 수 있었죠?! 그래서 우리가 사용한 것이 HOC(High... HoClocalStorage.setItemuseEffectaccesstokenclosurelocalstorage권한분기스택큐hydrationHighOrderComponentHoFdiffingwithAuthHighOrderComponent React Currying 커링 기법은 인자가 여러개인 함수의 일부 인자를 고정시키는 새로운 함수를 만드는 기법이다. 이를 이해하기 위해서는 HOC, HOF가 뭔지 알고 있어야한다. 다음 코드를 보자 word와 name이라는 두 개의 인자를 받아 출력하는 함수이다. 이 함수에 커링을 적용해보자. 2개의 인자를 받던 함수가 1개의 인자를 받는 함수 2개로 쪼개진 것을 볼 수 있다. 또한 첫 번째 인자 word를 "안녕"... ReactHoCHoFTILHoC React HOC vs HOF 다음과 같이 useEffect 로 토큰을 검사하여 페이지의 권한을 처리하게되면 여기서 useEffect문 만 따로 뽑아서 컴포넌트로 만든 후 import하여 사용하면 그렇다면 이 useEffect문을 따로 뽑아서 컴포넌트로 만드는 즉 HOC(Higher Order Component)를 만드는 작업을 직접 해보자! 좌,중간,우측 컴포넌트로 칭하겠다. 좌측 컴포넌트에서 이메일과 비밀번호를 입력하... HoCJavaScriptTILReactHoFHoC useCallback vs useMemo(feat. React.memo) 프로젝트를 보다가 useCallback, useMemo, React.memo를 봤는데 정확한 개념을 이해하지 못해서 찾아보기로 했는데 먼저 메모이제이션(memoization)에 대해 알아야 한다 memoization이란 기존에 수행한 연산의 결과 값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 기법으로 중복 연산을 피할 수 있다는 장점이 있다 useCallback의 deps가 변하... useCallbackHoCuseMemoReact.memoHoC React.forwardRef ref, key와 같은 특별한 키워드는 props으로 상속할 수 없다 하지만 ref를 상속해야하는 경우가 생긴다면 어떻게 해야할까? 프로젝트에 React.forwardRef가 있어 이를 찾아봤다 ref를 전달 받아 하위 컴포넌트에 전달할 수 있게 해준다 위 코드를 보면 React.forwardRef의 2번째 arg로 상위 컴포넌트에서 ref를 전달받은 것을 알 수 있다 전달받은 ref가 bu... ref inheritHoCReact.forwardRefHoC [KDT]FCFE - 8주3일 React Practice HOC HOC = function(컴포넌트) { return 새로운 컴포넌트;} withRouter(컴포넌트) -> router에 의해 호출되지 않아도 match, location, history 에 접근할 수 있도록 한다. ( React.forwardRef 사용 ) inputRef = React.createRef(); mount 된 이후 참조되면 사용할 수 있다. Hooks & Contex... useStateHoCuseEffectuseHistoryuseMemouseReducerhooksHoC HOC라고 읽고 Higher Order Component라고 쓴다 줄여서 HOC라고 한다. 리액트에서 제공하는 특별한 기능은 아니다. 다만 리액트 컴포넌트의 특성을 이용해서 컴포넌트를 손쉽게 재사용가능하기 위한 패턴이라고 보면 될것이다. 이제 간단한 count 컴포넌트 2개를 만들것이다. 하나는 ClickCount로 버튼을 클릭하면 count가 증가하고 다른 하나의 컴포넌트는 HoverCount로 마우스가 올라가면 count가 증가한다. 이 두개의 컴포넌트... HoCwithCountHoC