새로움으로 가득한,

꾸준한 사람이 되자😎

Blog/React.js

목표 - 프로젝트 전체 최적화 작업 나머지 최적화 하기 1개의 게시물을 삭제 했는데 나머지 아이템까지 리렌더링 일어남 => 게시물이 많거나 이미지가 포함될 경우에는 큰 메모리가 낭비 되기 때문에 심각한 문제가 발생! 1. 최적화의 시작은 React.memo로 컴포넌트를 묶어주는것! export default React.memo(DiaryItem); 2. useEffect를 활용해서 어떤 아이템이 리렌더링 되고 있는지 확인 (리프레시 전체 렌더 확인) useEffect(() => { console.log(`${id}번째 아이템 렌더!`); }); 0번 부터 19번의 아이템이 찍히는걸 확인할 수 있다. 3. App 컴포넌트의 onRemove 와 onEdit 최적화 const onRemove = useCall..

2022. 3. 1.

Blog/React.js

목표 - 현재 진행한 코드 중 낭비되고 있는 부분 찾아 최적화 하기 찾는 방법 어떤 컴포넌트가 낭비되고 있는지 크롬 도구로 찾을 수 있다. 이미지와 같이 일기 삭제를 했는데 에디터 전체가 렌더 된것으로 확인된다. 👀 코드를 수정해보자 1. onCreate함수에 React.memo로 묶기 // 아래처럼 직접 묶는건 함수길이가 길어질 경우 햇갈릴 수 있음. const DiaryEditor = React.memo(({onCreate}) => { ~~ // 그럴경우 하단 export default에 묶어주는 방식으로 하기! export default React.memo(DiaryEditor); React.memo로 묶인 DiaryEditor를 내보내는 것 이기 때문에 기존방식과 결과가 동일하다. 2. useEf..

2022. 2. 24.

Blog/React.js

🤷‍♀️ 컴포넌트 조건 업데이트가 필요한 이유? 지금까지는 부모 컴포넌트가 가지고 있는 데이터 A의 상태가 업데이트 되면 A를 받는 자식 뿐만 아니라 리렌더가 필요없는 자식까지 렌더링이 되었는데 이는 연산의 낭비 이다. 이러한 상황을 해결하기 위해서 React.memo를 활용해 함수형 컴포넌트에게 업데이트 조건을 걸어주면 업데이트 조건에 일치하는 컴포넌트만 리렌더링 하여 성능 최적화를 할 수 있다. 🤷‍♀️ React.memo 란? React.memo는 고차 컴포넌트 이며, 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다. 사용방법은 React.memo로 리렌더링을 원하지 않는 컴포넌트를 감싸주면 되는데, props가 바뀌지 않으면 리렌더링 하지 않는 강화된 컴포넌트를 돌려준다. 쉽게 ..

2022. 2. 24.

Blog/React.js

목표 - 현재 일기데이터를 분석하는 함수 제작 - 해당 함수의 일기 데이터의 길이가 변화하지 않을 때는 값을 다시 계산하지 않도록 하기 - Memoization 이해하기 Memoization 이란? 이미 계산 해 본 연산 결과를 기억 해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억 해 두었던 데이터를 반환 시키게 하는 방법 => 연산 과정 최적화 🤔 어떻게 적용할 것인가? data state가 가지고 있는 1~5 까지의 감정 점수중에 기분이 좋은 일기의 카운팅, 기분이 나쁜 일기의 카운팅, 그에 따른 비율을 알아 내는 함수를 만들자! function App() { const [data, setData] = useState([]); // 👉 A const dateId = useRef(0); c..

2022. 2. 23.