JIGGAG

5월 한달동안 로그

2025년 6월 3일

(번역) "use client"는 무엇을 하나요?

  • use client, use server
  • 서로 다른 런타임 환경이 존재하지만 각각의 파일이 서로의 환경에서 export 되어서 다른 환경으로 import 할 수 있음을 의미
    • use client - 클라이언트 함수를 서버로 export
      • 서버에서는 이 파일을 import 하면 <script> 태그로 가져와 읽으며
    • use server - 서버 함수를 클라이언트로 export
      • 클라이언트에서는 import 된 함수를 fetch 하는 형태
  • 지시어를 추가 하는 것만으로 호출 되는 것은 아니고
    • <script>, fetch 할 수 있도록 허용해주는 것

React Reconciliation: 컴포넌트 뒤에 숨겨진 엔진

  • 메모이제이션을 사용할 필요 없다는 리액트 컴파일러
    • 그 사실은 무지성 메모이제이션에게 큰 위협
  • 리렌더가 많이 일어난다는 사실은 컴포넌트 최소화가 되지 않았다는 것을 의미하는데
    • 분리하고 싶은데 분리하다보면 결국 다 필요한데 ⁉️
    • 무언가 잘못되었다는 사실에 분리하지 못한다
  • DOM 은 변경되지 않았다
    • 상태를 조건으로 리렌더 되고 있는데
    • 같은 요소 input에 대하여 DOM 자체를 변경되지 않는다는 사실
    • input > div 로 바뀌는 경우에만 언마운트 되면서 DOM 변경
    • 컴포넌트 자체가 그려지는데에는 리액트 요소가 중요하다는 것
  • 조정이 작동하는 방식
    • 리액트 요소 트리 비교
    {
  isBoolean ? (
    <div>
      <A />
    </div>
  ) : (
    <span>
      <A />
    </span>
  );
}
    • 상위 요소가 div > span 으로 변경되었다면 리렌더된다
  • 단 요소가 아닌 props만 변경되는 경우에는 
    {isBoolean ? <A /> : <B />}
{isBoolean ? <A type="a" /> : <A type="b" />
    • props만 변경되었으므로 컴포넌트 인스턴스는 그대로 유지된다
  • 동일한 key를 사용하는 컴포넌트는
    • 어느 곳에 위치하던 동일한 컴포넌트로 취급된다
    • 서로 다른 위치에 나타나더라도, 리액트는 동일한 key를 가진 컴포넌트를 동일한 컴포넌트로 간주합니다
    • 리액트 요소, key가 모두 동일하다면 컴포넌트를 리렌더링 하지 않고 props만 바꾸어 그린다
  • 리스트에서는 key가 없다면 위치를 기반으로 컴포넌트가 변경되었는지 판단하기에 위치가 변경되면 리스트가 변경되었다고 판단하고 새로 그린다
  • 비싼 비용의 컴포넌트는
    • 리렌더링 되지 않도록 상태를 지역화하여
    • 상태가 변경되는 컴포넌트를 최대한 분리하여 위치를 나눈다
    • 상태가 필요 이상으로 트리 상단에 위치하면 더 많은 컴포넌트가 재렌더링됩니다.
    • 메모이제이션 없이도 컴포넌트 경계를 잘 설정하면 성능을 최적화할 수 있습니다.
  • 과도한 메모이제이션으로 리액트의 조정 알고리즘과 싸우는 대신, 리액트가 컴포넌트를 식별하고 업데이트하는 방식에 맞춰 컴포넌트 구조를 설계하자
    • 🙏

프로세스를 촘촘하게 만드는 사람

  • 프로세스가 항상 모든 것을 커버할 수 없다
  • 비어있는 영역이 있을텐데, 이것이 자연스럽게 채워질때
©Jiggag, Built with Gatsby