리액트
[React] 레이아웃 훅 수정이 결제버튼 테스트에 영향을 미치는 이유
얼마 전, 회사에서 흥미로운 디버깅 이슈가 있었다. 우리 팀에서는 프로젝트 내부에서 사용하기 위해 여러 커스텀 훅을 만들어 재사용하고 있는데, 그중 레이아웃을 감지해서 특정 로직을 실행시킬 수 있는 훅이 존재한다. 이 훅은 useEffect훅을 사용하여 유사한 인터페이스를 확장한 커스텀 훅으로, window.innerWidth 감지를 통해 레이아웃을 알려주는 역할을 한다. 간소화해서 윤곽만 나타내면 대충 아래와 같은 형태로 구현되어 있다. (throttle 등은 생략) const useDisplayDetectEffect = (effect: Effect, deps: Deps) => { const callback = useCallback(effect, deps); useEffect(() => { const ..
[React] useCallback의 문제점
React 16.8에서 소개되었던 Hook API 중에서는 useRef는 제외한다면 최적화와 관련된 훅이 2개(useMemo, useCallback)가 있다. Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org 그중에서도 useCallback은 함수를 메모이제이션 하기 위해 사용하는 훅이다. 함수를 메모이제이션 하는 목적은 대개 성능의 최적화이고, 특히 리액트에서는 주로 메모이제이션 컴포넌트의 props로 넘기는 이벤트 핸들러 등의 함수가 불필요하게 재 생성되어 불필요한 렌더링이 일어나지 않게끔 사용한다. 그런데 우리가 useCallback을 사용하는 경우를 생각해보면, 빈 의존성 배열로 사..
[react] CRA로 만든 프로젝트 eject없이 hot-loader 적용하기
React 프로젝트 환경을 쉽게 구성할 수 있게 해주는 CRA 보일러 플레이트는 webpack 설정 등의 설정 파일을 숨김으로써 귀찮고 두려운 webpack 세팅에서 벗어날 수 있다는 이점을 가지고 있다. (기술 부채를 덮어둔다면) 다만 webpack 설정을 숨기게 되면서, hot-loader와 같이 webpack 설정과 긴밀하게 연결된 일부 의존성 모듈의 적용에 있어 제약을 가지게 된다. 이러한 문제는 eject(ejection: 숨겨진 설정 파일 창고 대방출) 명령어를 통해 설정 파일을 추출 후 직접 관리하여 해결할 수 있으나, 이 경우 CRA의 모든 설정을 직접 유지보수하게 되면서 CRA의 장점인 one Build Dependency를 잃게 된다. (cra eject는 되돌릴 수 없다는 게 큰 마음..
react에 super(props)를 써야하는 이유
https://min9nim.github.io/2018/12/super-props/ [React] super(props) 를 써야하는 이유 이 글은 Dan Abramov의 Why Do We Write super(props)? 글을 충분한 의역으로 번역한 것입니다. 번역이 일부 자연스럽지 않은 부분이 있을 수도 있습니다. 정확한 내용은 원문을 참고하기 바랍니다 최근 Hooks min9nim.github.io js언어에선 상속 클래스의 특성상 super()이 생성자에 강제된다. super()만 선언하더라도 작동은 보장된다. (props가 생성자 이후에 자동으로 세팅됨) 다만 생성자 호출 이후에 props가 세팅되기 때문에, 생성자 내부에서 사용되는 this.props는 undefined가 되어버린다. 이 때..