꿈꾸는 개발자

원티드 프론트엔드 최적화 강의를 들었을 때 현업에서는 useMemo, useCallback을 자주 사용하지 않는다는 말을 들었다. https://javascript.plainenglish.io/stop-using-usememo-now-e5d07d2bbf70#5aca Stop Using useMemo Now! Most of the Time It Slows Down Your Application javascript.plainenglish.io 위 링크는 useMemo를 난발하면 안 좋은 점과 최적화가 아닌, 오히려 App의 성능을 저하할 수도 있다고 말한다. 컴퓨터공학은 항상 trade-off를 고려해야 한다. 이 말은 즉슨 최적화에 따른 댓가가 분명 있다는 것! 일차적으로 useMemo, 그 자체보단 Re..

도입 원티드 6월 강의를 수강하면서 useRef로 값을 참조하고 관리하는 코드를 접했다. 강사님에 따르면 제어/비제어 컴포넌트의 사용을 고려할 때 useState를 사용할 것인지 아니면 useRef로 값을 관리할건지 상황에 따라서 나뉠 수 있다고 했다. 물론 둘의 차이점은 이해가 됐다. 하지만, 비제어 방식의 경우 단순히 렌더링 횟수를 줄이고, 개발자가 trigger할 수 있다는 이유만으로 사용하는지 궁금하기도 하고 개념이 조금 모호한 것 같아서...이전에 작성했던 글과 강의에서 학습한 자료, 그리고 최신에 업데이트 된 react 공식문서와 함께 정리하고자 한다. useRef에 대한 이해가 부족하시면 여기에 들어가서 추가적으로 학습하는 것을 권장한다. React 공식문서가 리뉴얼 되기 이전에는 "신뢰 가..

의의 useRef는 react의 상태 변환에 따른 rendering 중에 지속적으로 참조할 수 있도록 해주는 Hook이다. 즉 useRef는 렌더링의 영향을 받지 않는다고 볼 수 있다. 일단 무슨 말인가 싶을 거지만 밑에 추가적인 설명을 보면 이해를 할 수 있을 것이다. 사용법 import { useRef } from 'react'; function MyComponent() { const intervalRef = useRef(0); const inputRef = useRef(null); // ... 공식문서에 따르면 위처럼 가장 최상단에 useRef를 선언해줄 것을 권장하고 있다. Parameters 초깃값(initialValue): Object current 프로퍼티가 담고 있었으면 하는 초기값을 지정..

의의 useCallback의 경우 함수를 메모제이션을 하기 위해 사용되는 hook으로 알려져 있다.공식문서에 따르면 re-render를 할 때 함수를 cache한다고 나와있다. 결국 위 두 말을 합쳐보면, 함수를 기억해 re-render 과정을 통해 동일한 함수를 사용하도록 최적화하는 기법이라고 보면 된다. const cachedFn = useCallback(fn, dependencies) 코드 구조는 위와 같다. parameter를 살펴보면 fn: cache 즉 기억/저장하고 싶은 함수를 의미한다. 공식문서에 따르면첫 render 때 fn은 호출되는 것이 아닌 반환이 되는 것이다. 그 다음 렌더링부터 만약 dependencies의 값이 변경되지 않는다면, react는 계속 같은 함수를 반환해줄 것이다...

처음부터 TypeScript로 react를 시작하면 간단하게 밑과 같이 npx로 진행하면 된다. npx create-react-app my-app --template typescript or yarn create react-app my-app --template typescript 하지만 만약 이미 만들어 놓은 react에 중간 갑자기 typescript를 적용하고 싶은 경우 다음과 같이 진행하면 된다. npm install --save typescript @types/node @types/react @types/react-dom @types/jest or yarn add typescript @types/node @types/react @types/react-dom @types/jest 그 다음 기존에 ..

button click 이벤트 예시 export default function Button() { function handleClick() { alert('You clicked me!'); } return ( Click me ); } Inline 작성 방식(일반적으로 간단한 함수를 작성할 때 유용하다 화살표 함수 사용 { alert('You clicked me!'); }}> 주의점: JSX 내부에 작성되는 함수는 반드시 호출이 아닌, 함수의 reference를 전달해야 한다. 첫 번째는 react에게 button이 click될 때만 함수가 호출되도록 기억하게 한다. 두 번째 예시는 ()는 함수를 호출하기 때문에 rendering되는 과정에서 click이 발생하지 않았음에도 불구하고 함수 호출이 발생한다...

HTML Form element 자체가 내부 상태를 가짐 => React의 다른 DOM element와 다르게 동작을 한다 Name: 위 form은 제출하는 순간 새로운 page로 이동하는 기본 HTML form 동작을 수행함 => React에서도 동일한 목적으로 사용할 경우 그냥 쓰면 됨 => 하지만, 보통 제출한 후 사용자가 입력한 데이터에 접근하는 것을 목적으로 하기 때문에 표준 방식인 제어 컴포넌트(controlled components)를 사용해야 함 제어 컴포넌트 (Controlled Component) HTML에서 input,textarea, select와 같은 Form element들은 사용자의 입력을 기반으로 state를 관리/업데이트 한다 => React state를 관리할 때 "신뢰 ..

Hook의 규칙(16.8 version에 추가된 기능) https://www.npmjs.com/package/eslint-plugin-react-hooks eslint-plugin-react-hooks ESLint rules for React Hooks. Latest version: 4.6.0, last published: 8 months ago. Start using eslint-plugin-react-hooks in your project by running `npm i eslint-plugin-react-hooks`. There are 7139 other projects in the npm registry using eslint-plugin-rea www.npmjs.com 위 링크는 Hook 규칙을..