Lee Junghan

삶은 나를 발견하는 과정이 아니라, 나를 창조하는 과정이다

react

react 관련 자료를 모아 둔다

redux 는 다음을 참고 한다

문서

react 관련 issue 다음을 참고 한다

벨로퍼트와 함께하는 모던 리액트

Hooks API Reference

[Experiment] Context Selectors

Guide

21 Best Practices for a Clean React Project

  1. Use JSX ShortHand
  2. Use Ternary Operators
  3. Take Advantage of Object Literals
  4. Use Fragments
  5. Don’t Define a Function Inside Render
  6. Use Memo
  7. Put CSS in JavaScript
  8. Use Object Destructuring
  9. String Props Don’t Need Curly Braces
  10. Remove JS Code From JSX
  11. Use Template Literals
  12. Import in Order
  13. Use Implicit return
  14. Component Naming
  15. Reserved Prop Naming
  16. Quotes
  17. Prop Naming
  18. JSX in Parentheses
  19. Self-Closing Tags
  20. Underscore in Method Name
  21. Alt Prop

1. Use JSX ShortHand

Bad

return <Navbar showTitle={true} />

Good

return <Navbar showTitle />

성능 최적화

useMemo, useCallback을 언제 써야되나?

  • counter 100 미만에서는 1ms 정도의 향상이다

공식 문서 : 성능 최적화

React Profiler를 사용하여 성능 측정하기

Performance Profiling Your React App

이 글은 Christian Nwamba의 Performance Profiling Your React App을 번역한 글

React 렌더링 이해 및 최적화 (With Hook)

  • shouldComponentUpdate
  • React.PureComponent
  • Hook

React.memo() 현명하게 사용하기

Preventing rerenders with React.memo and useContext hook

예시 codesandbox

React + D3.js: Balancing Performance & Developer Experience

  • d3 의 영향을 주는 Data 나 event 변경 시만 d3 를 업데이트하는 방법을 이야기하고 있다

[번역] React의 성능을 최적화하는 10가지 방법

  1. useMemo()
  2. 가상화된 List
  3. React.PureComponent
  4. Caching functions
  5. Reselect selectors 사용하기
  6. Web worker
  7. Lazy Loading
  8. React.memo()
  9. useCallback()
  10. shouldComponentUpdate()

Event

문서

e.persist()

주의 v17부터 e.persist()는 SyntheticEvent가 더 이상 풀링되지 않기 때문에 아무런 동작을 하지 않습니다.

pre-rendered

[React] react-snap으로 pre-rendered 리액트 앱 만들기

Pre-Rendering into Static HTML Files

react-snap-example

  • useState 를 사용하니 Error: TypeError: Object(...) is not a function 발생

Hook

[번역] useEffect 완벽 가이드

[번역] 심층 분석: React Hook은 실제로 어떻게 동작할까?

React Hook의 어두운면

  1. 이유 #1: 클래스는 헷갈린다.
  2. 이유 #2: 컴포넌트의 상태와 연관된 로직을 재사용하기 어렵다.
  3. 이유 #3: 복잡한 컴포넌트는 이해하기 어렵다.
  4. 이유 #4: 성능
  5. 이유 #5: Funclass가 더 간결하다
  • 숨어있는 사이드 이펙트
  • 늘어난 API
  • 부족한 선언성
  • 모두 React에 묶임
  • 뭔가 잘못된 느낌

유용한 hook

useOnScreen

  • 내부적으로 IntersectionObserver 사용
  • polyfill require('intersection-observer')
  • react-is-visible 검토했으나 IntersectionObserver 를 사용하는게 심플하다.

ref 를 받지 않도록 수정해서 사용

function useOnScreen<T extends Element>(rootMargin: string = '0px'): [MutableRefObject<T>, boolean] {
    const ref: any = useRef<HTMLDivElement>()
    return [ref, isIntersecting]
}

infinite-scroll-react-hooks

18 변경 점

React 18: 렌더링 최적화를 위한 자동 배칭

windowing

lib

react-virtualized

react-window

글들

React Windowing

  • 다량의 데이터로 list를 만들경우 react-window라는 라이브러리로 windowing을 하면 사용자 경험을 증진시키는 데 좋은 영향을 준다.

npmtrends

react-virtualized vs react-window

react-virtualized 를 활용한 무한 스크롤 구현

참고