Tech40 mobx 이슈 정리 1. Understanding reactivity array.push() https://spectrum.chat/mobx-state-tree/general/array-changes-are-not-reactive~6cf40135-3e13-4268-8a98-ba5fdabb8767 array에 push를 했지만 리렌더링이 되지 않는다. const addItem = (newItem) => { self.myArray.push(newItem); }; 리렌더링 되지 않는 이유는 메모리에서 array의 참조값이 변하지 않았기 때문이다. observer component에서 array의 메서드나 length에 접근해보자. (JSON.stringify() 나 slice(), toJS()와 같이 복사하는 방법도 가능하다.).. 2022. 6. 3. 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. Partial migration of javascript to typescript 다음 글은 Microsoft/TypeScript-React-Conversion-Guide의 예제를 기반으로 작성되었습니다. 본문의 코드는 다음 링크에 있습니다. 본 글은 Javascript에서 Typescript로의 부분적인 전환을 위한 TicTacToc을 예제로 한 가이드이다. 부분적인 전환이 아닌, 새로운 프로젝트를 시작하는 것이라면 다음 링크를 참고하자. 모든 프로젝트에서 Typescript를 채택하는 것은 2단계로 나눌 수 있다. 빌드 파이프라인에 TypeScript 컴파일러(tsc)를 추가 JavaScript 파일을 TypeScript 파일로 변환 프로젝트 전환 전에는 다음과 같은 폴더 구조를 가지고 있다. TicTacToe_JS / |---- css/ // css style sheets |--.. 2021. 10. 7. 가로 스크롤 앨범을 만들어보자. 기본적으로 가로/세로 스크롤 바는 노드들의 크기가 브라우저 뷰포트보다 클 때 생긴다. 우리는 또한, css로도 스크롤바를 만들 수 있다. 가로 스크롤 바는 overflow-x와 white-space 속성으로 만들 수 있다. .photo-scroll { overflow-x: scroll; white-space: nowrap; } .photo-scroll-image { width: 50px; height: 50px; border-radius: 10px; margin: 0 16px; } const imageTagWrapper = ({ src, name }: { src: string; name: string }): string => { return ``; }; const photoScrollWrapper = (.. 2021. 8. 22. 이전 1 2 3 4 ··· 7 다음
