WoohyunKing의 개발 성장일지

1) React란 ? 리액트(React)는 SPA의 UI를 만들기 위해 사용하는 자바스크립트 라이브러리이다. 장점 : 가상 DOM을 사용해서 SPA의 리플로우와 리페인트 과정을 최소화함으로써 성능을 최적화 시킨다. 컴포넌트 기반의 아키텍쳐를 가지고 있어, 재사용 가능한 컴포넌트는 생산성과 유지 보수성을 높인다. 단방향 데이터 바인딩으로 안정성이 보장된다. React 공식 문서 가이드와 방대한 생태계를 통해 쉽게 접하고 배울 수 있다. Typescript 사용에 용이하다. 단점 : 앱의 규모가 커지면 속도가 느려진다. 리액트는 자유도가 높아서 개발자마다 코딩 스타일을 통일하는데에 커뮤니케이션 비용이 든다. Javascript에 대한 숙련도가 필요하기 때문에 상대적으로 Vue보다 러닝커브가 높다. 2) Vu..

1. Automatic Batching Batching 이란 ? 업데이트 대상이 되는 상태 값들을 하나로 묶어서 한번의 리렌더링으로 업데이트가 일괄적으로 진행될 수 있도록 하는 것 위처럼 하나의 함수 안에 있는 여러 setState는 비동기로 동작하며, 한번의 리렌더링으로 상태가 일괄적으로 업데이트됩니다. 함수의 끝에서 상태가 업데이트가 되며, 단 한번의 리렌더링이 이루어집니다. 👉🏻 불필요한 리렌더링을 방지함으로써 렌더링 성능을 개선시킬 수 있음 ! batch update를 통해 불필요한 리렌더링을 줄여줌으로써 성능적으로는 큰 이점을 얻을 수 있었고, 이전 버전에서도 이러한 batch update를 지원했지만 Click과 같은 React의 이벤트 핸들러 내부에서만 적용이 가능하고 Promise의 내부나..

1) 메모이제이션(memoization) useMemo 함수에 대해서 알아보기 전에 알고리즘 시간에 자주 나오는 메모이제이션(memoization) 개념에 대해서 잠깐 짚고 넘어가겠습니다. memoization이란 기존에 수행한 연산의 결과값을 자료구조에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. memoization을 적절히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다. 2) 렌더링마다 호출되는 컴포넌트 함수 function MyComponent(props) { // 어떤 로직 (JavaScript) return; /* 어떤 화면 (JSX) */ } 일반적으로 React의 함수형 컴포넌트는 다음과 같은 구..

원래 컴포넌트가 렌더링 될 때 그 안에 있는 함수도 다시 생성하게 됩니다. 하지만 똑같은 함수를 컴포넌트가 리렌더링 된다고 해서 계속 함수를 다시 만드는 것은 좋은 현상이 아닙니다. 그리고 이렇게 컴포넌트가 리렌더링 될 때마다 함수를 계속 다시 만든다고 하면 만약 이 함수가 자식 컴포넌트에 props로 전달되면 함수가 다시 생성될 때마다 자식 컴포넌트가 리렌더링 하게 됩니다. 1) useCallback 이란 ? const memoizedCallback = useCallback(함수, 배열); useCallback()은 함수를 메모이제이션(Memoization)하기 위해서 사용되는 hook 함수입니다. 즉, 메모이제이션된 함수를 반환하는 함수입니다. useCallback 적용은 useCallback 안에 ..

1) 얕은 비교 const obj1 = { a: 1, b: 2 }; const obj2 = { a: 1, b: 2 }; console.log(obj1 === obj2); // false 원시 타입 데이터의 경우 '값'이 동일한지만 비교하고, 배열과 객체과 같은 참조 타입 데이터의 경우 '참조값'만 비교한다. 2) 깊은 비교 const obj1 = { a: 1, b: 2 }; const obj2 = { a: 1, b: 2 }; console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true 얕은 비교와 달리 깊은 비교는 객체의 경우에도 값으로 비교한다. 깊은 비교 방법은 아래와 같다. 1️⃣ Object depth가 깊지 않은 경우 : JSON.st..

앞서 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..

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 탭'을 ..

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를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 ..

React에서 클래스 컴포넌트를 사용하였던 이유 React의 함수 컴포넌트는 클래스 컴포넌트보다 더 짧고 간결한 코드, 높은 가독성, 더 빠른 성능, 보다 적은 메모리 사용이라는 장점을 가지고 있었지만 상태 관리나 컴포넌트의 생명주기(LifeCycle)를 관리할 수 없다는 단점으로 인해 클래스 컴포넌트를 사용하고 있었습니다. 하지만 React 16.8 버전에서 Hook 이라는 개념이 등장하고 난 뒤로 함수 컴포넌트를 주로 사용하게 되었고, React 에서도 함수 컴포넌트 사용을 권장하게 되었습니다. 상태(State) 관리 👉🏻 useState Hook 생명주기 관리 👉🏻 useEffect Hook React Hook의 또 다른 장점 HOC(Higher Order Component) 란 ? HOC(High..

1) React-query란 ? react-query는 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주는 라이브러리이다. 클라이언트 상태와 서버 상태를 명확히 구분하기 위해 만들어졌다. react-query에서는 기존 상태 관리 라이브러리인 redux, mobX가 클라이언트 상태 작업에 적합하지만, 비동기 또는 서버 상태 작업에는 그다지 좋지 않다고 언급한다. 클라이언트 상태(Client State)와 서버 상태(Server State)는 완전히 다른 개념이며, 클라이언트 상태는 각각의 input 값으로 예를 들 수 있고, 서버 상태는 데이터베이스에 저장되어 있는 데이터로 예를 들 수 있다. 2) React-query를 사용하는 이유 가장 기본적..