본문 바로가기

분류 전체보기443

[React] React.memo를 이용한 성능 최적화 앞서 React Profiler를 사용하여 리액트 앱의 성능을 측정해보는 시간을 가졌습니다. 모든 기능을 하나의 컴포넌트에 구현한 A.js와 여러 기능들을 여러 개의 컴포넌트로 분리한 B.js 로 구분하여 두 컴포넌트의 성능을 비교해보았는데, 이번 시간에는 React.memo를 사용하여 렌더링 성능을 개선시켜보도록 하겠습니다 :) [React] React Developer Tools / React Profiler로 앱 성능 측정하기 React Developer Tools 확장 프로그램 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools.. 2023. 7. 18.
[React] React Developer Tools / React Profiler로 앱 성능 측정하기 React Developer Tools 확장 프로그램 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 035a41c4e on 7/10/2023. chrome.google.com React Developer Tools는 리액트 확장 프로그램으로, 리액트 앱의 컴포넌트 트리와 렌더링 과정을 한눈에 확인할 수 있는 'Component 탭'과 렌더링 성능을 측정할 수 있는 'Profiler 탭'을 .. 2023. 7. 17.
[React] 배열 컴포넌트 사용 시 key 값으로 index를 사용하면 안되는 이유 key prop Error Element 배열 사용 시에 배열의 각 요소에 대해 key 값을 prop으로 전달해주지 않으면 위와 같은 에러가 발생하게 된다. React 에서의 key const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => {number} ); key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도와줍니다. key는 Element에 안정적인 고유성을 부여하기 위해 배열 내부의 Element에 지정해야 합니다. const todoItems = todos.map((todo) => {todo.text} ); Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 .. 2023. 7. 17.
[JS] 구조 분해 할당이란 ? 구조 분해 할당 var a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(a); // 10 console.log(b); // 20 console.log(rest); // [30, 40, 50] ({ a, b } = { a: 10, b: 20 }); console.log(a); // 10 console.log(b); // 20 ({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); console.log(a); // 10 console.log(b); // 20 console.log(rest); // .. 2023. 7. 16.
자료구조 및 알고리즘의 중요성과 코딩테스트 준비 본 게시물은 이번 카카오브레인, 네이버 부스트캠프, 소프티어 등과 같은 프로그램에서 코딩테스트를 경험하고 난 뒤에 코딩테스트의 중요성과 공부 방법 개선의 필요성을 느끼고 Programmers 의 2가지 글을 참고하여 정리한 내용입니다. 자료구조와 알고리즘란 ? ⚒️ 자료구조 : 메모리를 효율적으로 사용하며, 빠르고 안정적으로 데이터를 처리하는 것이 궁극적인 목표로 상황에 따라 유용하게 사용될 수 있도록 특정 구조를 이루고 있다. ⛓️ 알고리즘 : 특정 문제를 효율적이고 빠르게 해결하는 것이 궁극적인 목표로 정해진 일련의 절차나 방법을 공식화한 형태로 표현한 것을 말한다. 즉 수학적으로 표현할 수 있다. 요리의 과정을 프로그래밍에 대입해 보면 재료는 데이터, 도구는 자료구조, 레시피는 알고리즘이라고 볼 수.. 2023. 7. 16.
[React] 클래스 컴포넌트와 함수 컴포넌트 / HOC(Higher Order Component와 React Hook React에서 클래스 컴포넌트를 사용하였던 이유 React의 함수 컴포넌트는 클래스 컴포넌트보다 더 짧고 간결한 코드, 높은 가독성, 더 빠른 성능, 보다 적은 메모리 사용이라는 장점을 가지고 있었지만 상태 관리나 컴포넌트의 생명주기(LifeCycle)를 관리할 수 없다는 단점으로 인해 클래스 컴포넌트를 사용하고 있었습니다. 하지만 React 16.8 버전에서 Hook 이라는 개념이 등장하고 난 뒤로 함수 컴포넌트를 주로 사용하게 되었고, React 에서도 함수 컴포넌트 사용을 권장하게 되었습니다. 상태(State) 관리 👉🏻 useState Hook 생명주기 관리 👉🏻 useEffect Hook React Hook의 또 다른 장점 HOC(Higher Order Component) 란 ? HOC(High.. 2023. 7. 16.

티스토리툴바