현재 노트: KR-010.20 d
상위 분류: KR-010.20 React

#React

React와 연관되지 않은 시스템에 접속해 비디오를 재생하거나, 브라우저 API의 input에 초점을 맞추작업등을 위한 탈출구를 알아보자

https://ko.react.dev/learn/escape-hatches

• 다시 렌더링하지 않고 정보를 “기억”하는 방법
• React가 관리하는 DOM 엘리먼트에 접근하는 방법
• 컴포넌트를 외부 시스템과 동기화하는 방법
• 컴포넌트에서 불필요한 Effect를 제거하는 방법
• Effect의 생명주기가 컴포넌트와 어떻게 다른지
• 일부 값이 Effect를 다시 발생시키는 것을 막는 방법
• Effect 재실행을 줄이는 방법
• 컴포넌트 간 로직을 공유하는 방법

컴포넌트 정보를 기억은 하지만, 렌더링을 하고 싶지 않을 떄는 useRef훅을 사용해보기

컴포넌트가 일부 정보를 “기억”하고 싶지만, 해당 정보가 렌더링을 유발하지 않도록 하려면 ref를 사용하세요.

 let ref = useRef(0);
 ref.current = ref.current + 1

계산 비용이 큰 함수의 경우 성능을 위해 사용해 볼 hook 은?

-> useMemo

const visibleTodos = useMemo(() => getFilteredTodos(todos, filter), [todos, filter]);

todos를 필터링하는 메소드에서 todos나 filter가 변경되지 않는한 다시 실행되지 않기를 원한다는 것을 React에 알림

계산이 비싼지 어떻게 알 수 있나요? 

일반적으로 수천 개의 객체를 만들거나 반복하는 경우가 아니라면 비용이 많이 들지 않을 것입니다. 좀 더 확신을 얻고 싶다면 console log를 추가하여 코드에 소요된 시간을 측정할 수 있습니다.

console.time('filter array');
const visibleTodos = getFilteredTodos(todos, filter);
console.timeEnd('filter array');

전체적으로 기록된 시간이 상당한 양(예: 1ms 이상)으로 합산되면 해당 계산을 메모이제이션하는 것이 좋습니다.
그런 다음 실험적으로 해당 계산을 useMemo로 감싸서 해당 상호작용에 대해 총 로깅 시간이 감소했는지를 확인할 수 있습니다.
useMemo는 첫 번째 렌더링을 더 빠르게 만들지 않습니다. 업데이트 시 불필요한 작업을 건너뛰는 데만 도움이 됩니다.
당신의 컴퓨터가 사용자의 컴퓨터보다 빠를 수 있으므로 인위적인 속도 저하로 성능을 테스트하는 것이 좋습니다. 예를 들어 Chrome은 이를 위해 CPU 스로틀링 옵션을 제공합니다.
가장 정확한 시간을 얻으려면 프로덕션용 앱을 빌드하고 사용자가 사용하는 것과 같은 기기에서 테스트하세요.

유저가 변경될때 코멘트와 같은 컴포넌트를 초기화 하고 싶은데, 각 컴포넌트를 빈값으로 만들어야 할까요?

이런 경우 하위 컴포넌트를 일일히 수정하는 것은 문제를 발견하기 어려울 수도 있습니다. 예를 들어 프로필 사진이나 게시글과같은 미처 발견하지 못한 하위 컴포넌트들이 있을 수도 있기 때문이죠. 이런 경우에는 차라리 key값을 기준으로 props 를 업데이트하는 방식을 사요합니다.

React는트리 기준으로 렌더링을 업데이트하기 때문에 key값에 uesrId와 같은 값을 명시 해줌으로서 다른 컴포넌트이며 전부 렌더링이 필요하다가는 것을 명시해줍니다.

useEffect는 렌더링이 끝난 다음, 외부와의 연결이 필요한 경우 사용 하는 것이 권장됩니다.