본문 바로가기

World Article10

[World Article #9] React Design Patterns: You Should Know in 2023 - by Saurabh Barot (작성중...) 1. The HOC (Higher Order Component) Pattern - memo (React 내장 HOC) - withRouter (React-Router) - connect (React-Redux) - withStyles (MUI) - Q. class형 말고 함수 컴포넌트로 작성 가능? - Q. Redux의 flux 패턴이란? - 예시) memo, withRouter 2. The Provider Pattern - React-Redux, Mobx 등 상태 관리 라이브러리의 기본 - React 내장 Context API 기반 - 핵심은 Avoid Props Drilling - Q. 그 사이 props 필요없는 컴포넌트도 리렌더링 같이 발생? - 예시) 어드민 3. Presenta.. 2023. 10. 18.
[World Article #8] You’re overusing useMemo: Rethinking Hooks memoization - by Ohans Emmanuel React에서 useMemo 훅을 사용할 때 고려할 점이 있습니다. 무턱대로 memoization 캐싱을 위해 사용하는 것은 올바르지 않습니다. 우선 기본적으로 성능에 크게 영향을 미치지 않을 정도의 값이면 useMemo를 굳이 사용하여 공간 복잡도를 높일 필요는 없을 것 같습니다. 단순히 boolean 같은 primitive type value를 위해서 사용하는 것은 효율적이지 않고 서버로부터 data를 fetch 하는 것과 같이 객체 타입의 큰 규모의 타입은 data가 변경될 때마다 값을 갱신시켜주는 것이 좋아 보입니다. 또한 primitive type의 value는 객체처럼 참조 주소가 있어서 새롭게 만들 필요가 없어서 참조 주소는 변경되지 않습니다. 우선 기본적으로 코드를 구현하되 성능 이슈가 있.. 2022. 9. 23.
[World Article #7] You no longer need to import React from 'react' - by dhondup 과거에 리액트 코드를 작성할 때는 항상 import react from 'react' 를 최상단에 작성하는 것이 default였습니다. JSX가 React의 React.createElement 메소드를 사용해서 일반 JS로 변환되기 때문입니다. 하지만 React v17 부터는 자동적으로 리액트가 JSX를 변환시켜줍니다. (구형 버전에서도 이제는 자동 변환해준다고 합니다) 기존의 createElement 메소드보다 성능적인 이슈를 해결해주고 좀 더 단순화시켜준다고 합니다. 단, React에서 제공하는 훅이나 기본 기능을 사용하기 위해서는 react를 import 해야합니다. [You no longer need to import React from 'react'] - dhondup [New JSX Trans.. 2022. 5. 3.
[World Article #6] 8 JavaScript Tricks to Make You a Better Programmer - Fatfish JS에 ~~연산자가 있는 건 처음 봤네요,, (Math.floor()와 동일하다고 합니다.) [8 JavaScript Tricks to Make You a Better Programmer] - Fatfish 2022. 5. 1.
반응형