Redux Toolkit (RTK) slice 개념과 사용법 정리

Redux-toolkit(RTK)는 Redux의 여러 단점을 보완한 전역 상태 관리 라이브러리이다특히 Redux의 3가지의 문제점을 해결했다너무 복잡하다잘 쓰려면 추가 패키지가 필요하다간단한 걸 쓰기 위해서도 많은 코드를 작성해야한다 → action type, action creator, reducer ..sliceslice는 reducer, action.type, action creator등을 한번에 만들 수 있는 redux 확장 개념이다 slice의 사용법을 3단계로 나누면 아래와 같다코드를 통해 단계를 살펴보자1. createSlice로 slice를 만든다2. slice 안에, 필수 요소인 initalState, name, reducers를 설정한다.3. reducer과 action.creator를..

• format_list_bulleted FrontEnd ✨/React
• · 2024. 6. 10.
• textsms

이번 프로젝트에서 진행한 React 폴더구조와 개선할 점

이번 팀프로젝트를 진행하면서 사용한 폴더구조를 정리해보려 한다프로젝트 초기 세팅을 맡아서 진행했는데, 시간이 촉박해서 항상 했던 모듈화로 진행했는데 팀원들에게 설명을 잘못했는지, 기존에 예상했던 거와 다르게 만들어진 것들이 있었다 그래서 여태까지 했던 방법과 개선도니 폴더구조를 구체적으로 정리해놓으려 한다 이번 프로젝트에서 적용하고 싶었던 건1. styled-component를 사용하면서 스타일 코드를 다른 파일로 분리하고 import 해서 사용하기2. RTK slice 사용하기3. 최대한 컴포넌트 / 페이지 단위로 분리하기 (이게 제일 안 됐다 ) 진행한 프로젝트 구조 + elseassets/  : 이미지와 같은 정적 자원components/ : 재사용 가능한 컴포넌트hooks/layouts/pages..

• format_list_bulleted FrontEnd ✨/React
• · 2024. 6. 3.
• textsms

리액트 렌더링 최적화 방법 useCallback, useMemo, React.memo 정리

Memoization (메모이제이션)기존에 계산한 값을 메모리에 저장해두고, 재사용하는 기법  리액트에서 메모이제이션1. 정말로 컴포넌트, 데이터의 생애주기에 따라 어떤 값을 갱신하고 싶을 때2. 리렌더링을 할 때마다 새로운 값을 계산 / 정의하는 것이 문제가 될 때 - 무거운 작업일 때 - 값의 참조값 또는 함수의 참조값을 유지하는 것이 중요할 때 컴포넌트가 리렌더링되면 컴포넌트 안에 선언된 변수는 재선언/재할당이 일어난다 (= JS 런타임의 메모리 참조가 변경) 리액트는 가상돔으로 바뀐 부분만 업데이트(렌더링이 되도 실제 돔은 업데이트 x)하지만 컴포넌트 안에 시간이 오래 걸리는 일이 있다면 가상돔을 만드는 시간이 오래걸림  useMemo (값)💡 의존성 배열이 변경되지 않는 이상, 같은 값 반환c..

• format_list_bulleted FrontEnd ✨/React
• · 2024. 5. 31.
• textsms

리액트에서 상위 컴포넌트와 부모 컴포넌트는 다르다

리액트 수업 중 얼핏 알았지만, 정확히는 몰랐던 개념이 나왔다. 아래 코드에서 RouterProvider, div의 부모 컴포넌트는 ? 감싸고 있는 Wrapper? App?나 또한 확신있게 말하지 못했다 정답은 App이다 누가 부모 컴포넌트인지 확인하는 가장 빠르고 정확한 방법은 props 전달이다Wrapper에서 div로 props 전달이 가능한가?  아니다 props로 내려줄 수 있는 건 App 컴포넌트에서 가능하다 Warpper 는 상위 컴포넌트, App은 부모 컴포넌트이다 결론- 부모 컴포넌트는 자식 컴포넌트에게 데이터를 전달할 수 있다 (props 형태로)- 부모가 바뀔 때 자식이 리렌더링된다

• format_list_bulleted FrontEnd ✨/React
• · 2024. 5. 29.
• textsms

React 프로젝트에서 사용할 CSS 라이브러리 비교 (PureCSS, PostCSS, Tailwindcss, Styled Components)

CRA에서 기본 사용-postcss, tailwindcss, sass-loaderPure CSS1. 순수 css 파일2. 이름 충돌 문제 발생 CSS 파일을 직접 작성하고 컴포넌트에 import 하여 사용한다동일한 이름이 있을 경우, 가장 나중에 로드된 CSS로 덮어씌워진다 PostCSS컴포넌트.module.css *.module.css 파일로 CSS를 모듈화하고, styles 객체를 가져와 사용한다동일한 클래스 이름이라도 자동으로 고유한 ID가 붙어 충돌을 방지한다import styles from ‘./Button1.modle.css’Button2; styled Components (CSS-in-JS)스타일링 된 컴포넌트 스타일링 된 컴포넌트를 생성하여 사용한다컴포넌트이기 때문에 리액트를 위한 스타..

• format_list_bulleted FrontEnd ✨/React
• · 2024. 5. 24.
• textsms

React Component와 React Element

리액트의 정체성인 컴포넌트와 한번쯤은 들어봤을 엘리먼트, 비슷하지만 이 둘은 다르다! 결론부터 말하면, React Component의 반환값이 React Element 이다. 리액트 컴포넌트(React Component)UI의 한 부분을 캡슐화하여 재사용 가능한 코드 블록으로, 함수 또는 클래스이다.독립적인 state, props를 관리하고 element 를 반환하여 렌더링하는 역할을 한다. 즉, 컴포넌트는 엘리먼트의 설계도이다.function MyComponent() { return Hello, World!;} 리액트 엘리먼트(React Element)컴포넌트의 인스턴스로, 직관적으로는 JSX에서 html 태그로 된 객체이고,내부적으로는 화면에 표시할 내용을 기술한 Virtual DOM에서 사용하는 ..

• format_list_bulleted FrontEnd ✨/React
• · 2024. 5. 13.
• textsms