본문 바로가기

Tech/React13

React 이슈 정리 1. exhaustive-deps always full 'props' object for dependency https://github.com/facebook/react/issues/16265 아래와 같이 작성했는데도 불구하고 props를 디펜던시로 지정하라는 eslint 오류가 vscode에서 발생한다. useEffect(()=>{ console.log('Running useEffect...'); console.log(typeof(props.myProp)); },[props.myProp]); 2. useState lazy initialization https://reactjs.org/docs/hooks-reference.html#lazy-initial-state lazy initialization 한 .. 2022. 6. 3.
useEffect의 Dependency Array 비교 원리 요약 useEffect의 Dependency Array 비교 원리를 파악한다. Reference Type일 경우 useEffect의 callback을 호출하지 않기 위해 dependency를 어떻게 비교할 것인지에 대해 대안을 알아본다. useEffect가 존재하는 Component Render Flow First Render: init Component -> useEffect Re-Render: init Component -> clean up useEffect -> useEffect react-reconciler useEffect의 update 조건이 충족할 때, dependency를 확인하는 코드를 보자. // https://github.com/facebook/react/blob/ddd1faa1972.. 2022. 5. 25.
react-hot-loader란? HMR (HotModuleReplacement) react-hot-loader 는 코드가 변경되었을 때 페이지를 새로고침 하지 않고 바뀐 부분만 빠르게 교체해주는 라이브러리이다. 앱의 규모가 커지면 개발서버가 수정될 때마다 새로고침이 된다면 딜레이가 발생되어 개발의 흐름이 중간중간 몇초씩 끊길 수도 있다. 자바스크립트 코드의 일부분만 교체하는 기능은 웹팩 개발서버의 기능이기 때문에, 라이브러리 없이도 가능하다. 하지만, 어플리케이션의 state를 계속 유지하려면 과정이 복잡하기 때문에 라이브러리의 힘을 빌릴 필요가 있다. (단, 컴포넌트의 메소드중 async/await을 사용한 메서드를 수정했다면 새로고침을 해주자.) react-hot-loader는 v3와 v4 버전이 존재한다. v4이전 버전인 v3의 .. 2021. 10. 26.
SyntheticEvent and throttle 탁구 게임에서 paddle(탁구채)의 위치를 canvas의 onMouseMove 이벤트를 통해 서버에 반영하려고 했다. 그러던 와중에 onMouseMove의 event.currentTarget에서 신기한 현상을 발견했다. 아래 동영상은 다음 코드를 출력한 동영상이다. console.log(3, event.currentTarget); 보이는가... null이었다가 어느 순간 currentTarget이 생겨난다. (아래 사진은 event만 출력했을 때 사진이다.) 아래는 사용하고있는 react 버전이다. "react": "^17.0.2", "react-dom": "^17.0.2", 우선, currentTarget이 존재하다가 null이 된 것이 아니고, null이었다가 currentTarget이 존재하게 되.. 2021. 8. 7.
ReactElement.js ReactElement.js 파일을 분석해 보자. hasValidRef function hasValidRef(config) { if (process.env.NODE_ENV !== 'production') { if (hasOwnProperty.call(config, 'ref')) { var getter = Object.getOwnPropertyDescriptor(config, 'ref').get; if (getter && getter.isReactWarning) { return false; } } } return config.ref !== undefined; } React Element가 생성될 때, defineRefPropWarning가 호출되기 때문에, React Develop mode에서 props가.. 2021. 8. 4.
Controlled Components, Uncontrolled components 사전 지식 우선 두 가지 개념을 알아보기 전에, 기본 개념을 알아보자. HTML에서 , , 같은 Form element는 사용자 입력에 기반해서 자신의 상태를 유지하거나 갱신한다. 즉, HTML 태그 자체적으로 상태를 갖는다. Input event Input event가 발생하면, , , 의 value가 변한다. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event HTMLElement: input event - Web APIs | MDN The input event fires when the value of an , , or element has been changed. developer.mozilla.org Change ev.. 2021. 8. 3.

티스토리툴바