1. useMeno 호출 결과를 메모이제이션(저장) 하는 Hook 컴포넌트가 리렌더링될 때, 특정 함수의 계산결과가 이전과 동일하다면 굳이 다시 계산하지 않고 저장된 결과를 재사용한다. const memoizedValue = useMemo(() => { // 복잡한 계산 식 },[의존성배열] ); 첫 번째 인자: 값을 계산하고 반환하는 함수.두 번째 인자 (의존성 배열): 이 배열 안의 값이 변경될 때만 첫 번째 인자의 함수가 다시 실행된다. 배열이 비어있으면([]) 컴포넌트가 처음 렌더링될 때만 함수가 실행됩니다.2. useCallback 함수 자체를 메모이제이션 하는 hook 함수형 컴포넌트는 리렌더링될 때 마다 내부의 함수도 새로 생성된다. const me..

1. 번들링이란? 번들링은 여러개의 파일을 하나로 묶는 작업 react 프로젝트를 구성할 때 html 파일은 index.html 하나만 사용하는 경우가 많지만, 자바스크립트와 css 파일은 컴포넌트의 숫자에 따라서 여러개 가 생성이 됨 JSX 문법을 사용하는 react 에서는 모든 컴포넌트가 자바스크립트 파일이기 때문에 파일의 수가 많아 진다. 이 파일들을 하나로 합쳐주는 것이 바로 번들링이다. ✅ 번들링의 장점HTTP 요청 수 감소 → 로딩 속도 향상많은 파일을 각각 요청하면 속도가 느려질 수 있다.번들링을 통해 하나의 파일로 만들면 요청 수가 줄어들어 성능이 향상.코드 압축 → 파일 크기 감소공백, 주석 등을 제거하여 코드가 압축되고, 최종 번들 파일의 크기가 작아진다.사용하지 않는 코드 제거 (..

1. Redux ToolKit Redux 를 좀 더 쉽게 사용할 수 있도록 만들어진 라이브러리로 공식문서에서도 RTK 를 사용할 것을 권장 2. 설치npm install @reduxjs/toolkit react-redux 3. 왜 Redux Toolkit 인가? 기존 Redux 에서는 Action Type 작성 Action 생성자 작성 Reducer 작성 을 했지만 RTK 에서는 CreateSlice 함수 하나로 가능 그리고 Combine Reducers 후 createStore 작성 하는 것도 configureStore 함수 하나로 가능 하다. 4. 사용방법 1) createSlice ..

1. Redux 란 Redux 는 react 에서 많이 사용하는 전역 상태관리 라이브러리 상태를 한 곳에서 통합 관리할 수 있어서 예측가능한 방식으로 상태 관리 가능 Redux 에서 공식적으로 추천하는 방법은 Redux Toolkit 을 사용하는 것이지만 Toolkit 사용 시에 Flux 패턴을 확인하기가 힘들기 때문에 Redux를 활용하였다. "Redux Toolkit은 Redux 로직을 작성하기 위한 표준 방식이 되도록 만들어졌고, 사용하기를 강력히 추천드립니다." https://ko.redux.js.org/redux-toolkit/overview/ Redux Toolkit: 개요 | ReduxRedux Toolkit은 Redux 로직 작성을 위해 권장하는 방법입니다ko.redux...

1. Tailwind CSS 란 ? Tailwind CSS 는 가장 대표적인 Utility-First CSS 프레임워크이다. Utility-First 란 미리정의된 CSS 클래스들을 필요할 때마다 가져다 쓰는 방식 예를 들어 p-4 , text-blue-600, flex 등의 클래스를 HTML 에 추가하는 것만으로 스타일을 바로 적용할 수 있다. CSS 코드를 직접 작성 하지 않고, Class 이름도 안지어도 되기때문에 속도와 생산성 에서 장점이 있다. 2. Tailwin CSS 설치 ( React + Vite 기준) 1) Tailwin CSS 설치npm install tailwindcss @tailwindcss/vite 2) vite.config.js 파일의 plugin 에 tailwi..

이번 포스팅에서 다룰 내용styled-components가 무엇인지기본적인 사용법과 실습 예시컴포넌트 스타일 재사용 방법자동완성 VSCode 확장 소개styled-components의 고급 사용법props를 이용한 동적 스타일링 1. 웹프론트엔드의 기본 구성 1) HTML 2) JavaScript 3) CSS 앞에서 SCSS라는 기술을 알아 보았는데 Mixin 과 변수 및 중첩을 사용하여 문법을 좀더 단축 시킬 수는 있었지만 아직도 CSS 파일은 따로 작성해야 한다. 만약 CSS 까지도 JavaScript 파일 안에서 작성 할 수 있다면 진정한 컴포넌트 단위 개발(*CCD)이 가능 → 이렇게 해서 탄생한 기술이 Styled Componet 다 *CCD : Component Driven..