React에 HOC 라는 컴포넌트가 실무에서 auth 용도로 사용된다는 걸 얼핏 봤었다. HOC의 구조가 특이하다보니 자료를 찾아보면서도 이렇게 쓰면 되겠다 싶은 느낌이 잘 안오기도 했지만, 언제 사용하면 좋겠다 정도의 느낌만 있었다. 이번에 프로젝트를 하면서 HOC를 써보기 좋은 구조가 나와서 직접 구현해보고 공유해보려고 한다. 1. HOC가 뭐고 언제 유용한가요? 공식 문서에는 아래와 같이 나와있다. 고차 컴포넌트(HOC, Higher Order Component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 고차 컴포넌트(HOC)는 React API의 일부가 아니며, React의 구성적 특성에서 나오는 패턴입니다. 구체적으로, 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환..

안녕하세요. 뭐 질질 끌어야 되나요? 그냥 바로 해보죠. 1. useCallback에 대해서 Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], ); useCallback은 메모이제이션 된 콜백을 반환합니다. 엥? 그러면 그냥 함수랑 무슨 차인가요? useCallback을 사용하면 불필요한 렌더링을 방지할 수 있습니다. 특히 onChangeEvent와 결합했을 때 더 심한데요. e.target.value값이 변할 때 마다 state가 바뀌기 대문에 그 sta..