React

streamich/react-use 단위 테스트 코드

react-use 는 다양한 React hook 들을 모아놓은 라이브러리다. 그리고 위 링크는, 해당 라이브러리 리포지토리의 단위 테스트 코드들이다. 여러 유형에 대한 hook 테스트 코드들이 모여있다.

Examples of large production-grade, open-source React apps

프로덕션 레벨의 React 오픈소스 프로젝트들을 모아놓은 글이다. React 로 처음 실무를 하던 그 시절에 정말 보고 싶었던 글인데, 이제서야 만나게 되었다. 여러가지 흥미로운 프로젝트들이 많다. 개인적으로 가장 눈에 띄는 것은 아래 세 개 정도이다.

Avoiding useEffect with callback refs

아래처럼 컴포넌트 초기화 시 렌더링되지 않는 DOM 에 대해 ref 로 접근하고자 하는 경우, 의도한 대로 동작하지 않을 수 있다.

const ref = useRef(null);

useEffect(() => {
  ref.current?.focus();
}, []);

return <div>{someConditionIsTrue && <input ref={ref} />}</div>;

그러면 이 상황에서는 input 이 렌더링 되었을 때 ref 를 바로 사용할 수 있는 이상적인 방법은 무엇일까? 에 대한 글이다.

(번역) React는 컴포넌트를 언제 다시 리렌더링 할까요?

  • 자신 혹은 부모의 상태가 업데이트 될 때 컴포넌트는 리렌더링 된다.
  • 리렌더링을 줄이기 위해서는
    • 상태값을 취급하는 곳을 상위 컴포넌트에서 하위 컴포넌트로 옮기는 방법과
    • React.memo 를 사용하는 방법이 있다.

라는, 이제는 다소 뻔한 내용의 글.

How to use React.memo() to improve performance

React.memo 를 언제 어떻게 쓰는지에 대한 글. 다른 건 다 기본적인 내용이라 건너뛰고 글 후반에 나오는 "Why not use React.memo by default?" 부분만 읽어도 충분하겠다. React.memo 를 항상 쓰지 않는 이유는

  • React.memo 의 최적화 방식은 캐싱이기 때문에 메모리 낭비가 발생할 수 있고
  • 대상 컴포넌트의 prop 이 자주 바뀔 경우 최적화하는 비용이 비싸지기 때문이다.
  • 또한 이미 React 가 기본적인 성능 최적화를 잘 해주고 있으므로, 성능 이슈가 없는 상황에서 굳이 먼저 React.memo 를 쓸 필요가 없다.

CSS

Do you know about overflow: clip?

overflow: clip; 속성에 관한 설명.

Etc

What's the name for hyphen-separated case?

camelCase, ClassCase, snake_case, 그렇다면 대시로 이어진 네이밍 컨벤션의 이름은? Kebab case 라고 한다. 몰랐다. 왜 몰랐을까...?

(번역) V8 함수 최적화

V8 엔진의 함수 최적화에 관한 설명.

V8 은 객체의 형식을 Shape 라는 형태의 캐시로 캐싱한다. 객체가 실제로 갖고 있는 값이 다르더라도 형식이 같다면 (동일한 키값을 갖는다면) 같은 Shape 캐시를 갖는다. 하지만 형태가 같더라도 어떻게 초기화하냐에 따라 Shape 캐시가 여러 개 생성될 수 있다.

  • 초기화할 때 x, y 키 값을 모두 갖고 있었는지,
  • 혹은 초기화 할 때는 키 값이 하나도 없었다가 x, y 키 값을 하나씩 하나씩 추가해준 것인지,

당연히 후자가 더 비효율적으로 캐싱한다.

V8 은 함수 또한 캐싱하는데, 같은 함수라 할 지라도 호출 당시 인자의 Shape 에 따라 캐싱이 갈린다. 즉, 같은 Shape 의 인자를 계속 쓰면 캐싱된 함수를 사용하기 때문에 성능에 유리하다.

라는 내용의 글이다. 보다 상세한 설명은 원글을 참고하자.