자료/article (5) 썸네일형 리스트형 useMemo 그리고 useCallback 이해하기 Memo()를 하기 전에 1. production 빌드를 실행중인지 확인한다. (개발 빌드는 극단적인 경우 수십배까지 의도적으로 느려집니다.) 2. 상태를 트리에서 불필요하게 높은 곳에 두지 않았는지 확인합니다.ex) input의 상태를 중앙화된 스토어에 두는 것은 최선이 아닐수있음 3. React DevTools Profiler를 실행하여 리렌더링되는 부분을 확인하고 가장 복잡한 하위 트리를 memo()로 감쌉니다. (그리고 필요한 곳에 useMemo()를 추가합니다.) import { useState } from 'react'; export default function App() { let [color, setColor] = useState('red'); return ( setColor(e.targ.. It’s 2022, Please Don’t Just Use “console.log” Anymore console을 실용적으로 사용하기 위한 팁!! 1-1. console.log() console.log를 자주 사용하다보면 인쇄되는 정보의 양이 많아지고, 정보가 직관적이지 않게 된다. 개체를 넣는다면 출력되는 정보를 명확하게 볼 수 있다. 1-2. CSS스타일 2. console.warn() 콘솔이 많은 정보를 출력할 때, 우리가 원하는 것을 정확히 찾기가 쉽지 않다. 원하는 부분에 console.warn을 사용한다면 노란색 경고아이콘이 우리에게 친절한 이정표가 될 것이다. 3. console.error() HTTP 요청을 보냈을때, 에러 핸들링에 있어서 무의식적으로 console.log를 사용하는 경우가 많다. 하지만 이런 에러 핸들링에 console.error() 를 사용한다면, 빨간색 경고아이콘과.. 변경에 대해 의사소통하기 프로젝트를 진행하면서 내 코드가 조원에 의해 수정되거나, 조원의 코드를 내가 수정하는 경우가 빈번했다. 항상 소통방식이나 코드 수정에 대해서 고민하여 조심스럽게 해야한다는 생각이 들어, 좋은 아티클과 에세이가 있어서 간단히 기록해두기 위해서 글을 쓴다. 소프트웨어 변경에 대해 이야기하는 방법 원작자가 불쾌하지 않고 개선하는 방법, 나의 코드 수정이 불편하지 않은 편안한 문화를 위한 조언. 대상에 따른 소통법 1. 이전의 상태는 어땠나요? 문제영역의 틀을 잡아야한다. =>문제영역의 설명 대상을 파악하기 문제영역에 직접적이고, 오래 근속한 사람을 대상으로는 간단한 설명. 신입사원이나, 처음 코드를 접하는 사람에게 설명한다면, 더 깊고 자세하게 정보를 설명해야함. 2. 왜 미흡했나요? 무엇이 누락되었는지, 잘.. 리엑트는 언제 리렌더링 하는가. 리액트의 핵심 리엑트의 모든 리렌더링은 상태변경에서 시작된다. 컴포넌트가 리렌더링 될 때 모든 하위 요소들은 다시 렌더링 된다. "Increment" 버튼을 클릭하면 상태변경이 트리거 되고, Counter 컴포넌트의 리렌더링이 일어나며, Counter에 의해 렌더링 되는 BigCountNumber 또한 리렌더링 된다. 상태 변수가 변경될 때마다 전체 앱이 리렌더링된다. (리엑트에서 발생하는 모든 상태 변경이 애플리케이션 전체의 렌더링을 강제하는 것은 아님.) => 리렌더링은 상태를 가지고 있는 컴포넌트와 해당 컴포넌트의 하위 컴포넌트에만 영향을 준다. Why? 리엑트의 주요작업은 애플리케이션 UI를 리엑트 상태와 동기화하여 유지하는 것. 리렌더링의 요점은 변경해야할 사항을 파악하는 것. 리엑트는 이전 상.. 과한 지연 로딩이 웹 성능에 미치는 영향 지연 로딩이란? 지연 로딩은 리소스가 필요할 때까지 리소스를 가져오기를 일시적으로 연기하여 웹 페이지의 데이터 사용을 줄이는 편리한 기술이다. 요즘은 지연 로딩이 웹 표준이며, 대부분의 주요 웹 브라우저는 loading = "lazy" 속성을 사용하여 지연 로딩을 지원한다. 지연로딩을 사용하면 컨텐츠가 필요한 위치로 스크롤 되었을때 리소스를 가져와 컨텐츠를 볼 수 있게 한다. 지연 로딩의 성능 효과 지연로딩의 장점 페이지 로딩 시간 감소(PLT) : 리소스 로딩을 지연시킴으로써 초기 페이지 로드 시간을 줄일 수 있다. (최근 개발하고 있는 실전 프로젝트에서는 posts 페이지에서 전체게시물을 불러와서 무한스크롤로 사용자에게 보여주는데, 이는 성능저하를 일으킬 수 있다고 본다. 지연로딩을 병합 적용한다면 .. 이전 1 다음
