나디아 성장 일기

Children vs Context API vs 상태 관리 라이브러리 모두 상태나 데이터를 컴포넌트들 간에 전달할 수 있는 기능을 제공한다. 구현하는 방식과 적합한 사용 범위는 다르다.  1. children: 부모 컴포넌트에서 자식 컴포넌트로 UI 요소를 전달하기 위해 사용되는 방식  사용 방식부모 컴포넌트가 자식 요소를 전달하면, 자식 컴포넌트에서 props.children을 통해 해당 요소를 렌더링한다. 적합한 경우주로 동적으로 구성 요소를 전달하거나, 컴포넌트의 내용을 정의할 때 사용된다.// Parent는 요소를 Child로 전달function Parent() { return ( 자식 컴포넌트의 내용 );}// Child는 이를 렌더링function Child(pr..

useMemo(): 계산된 값 메모이제이션값을 다룰 때 사용비싼 계산을 다시 하지 않도록 최적화리렌더링 중에도 이전에 계산된 값을 재사용import React, { useState, useMemo } from 'react';function ExpensiveCalculationExample() { const [count, setCount] = useState(0); const [list, setList] = useState([1, 2, 3, 4, 5]); // 값 메모이제이션 const expensiveResult = useMemo(() => { console.log("Expensive calculation..."); return list.reduce((sum, num) => su..

Styled-components: JS 파일 내에서 CSS를 작성하고, React 또는 JavaScript 프레임워크와 통합할 수 있도록 해주는 CSS-in-JS 라이브러리컴포넌트 기반 개발에 적합하며, 스타일을 컴포넌트 단위로 캡슐화하여 관리할 수 있다. 장점CSS와 JavaScript의 통합: CSS를 JavaScript 파일 내에 작성하여 스타일과 로직을 한 곳에서 관리할 수 있다.Scoped 스타일: 스타일이 해당 컴포넌트에만 적용되도록 자동으로 범위가 설정되어 클래스 이름 충돌이 발생하지 않는다.동적 스타일링: props나 상태(state)에 따라 동적으로 스타일을 변경할 수 있다.재사용성: 스타일이 적용된 컴포넌트를 다른 곳에서 재사용할 수 있으며, 상속(Extending Styles)을 통해..

Framer MotionReact (선언형) 애니메이션 라이브러리  https://euid.notion.site/Framer-Motion-15d75899a1bc47e7978fa63926069afa  Framer Motion | NotionReact (선언형) 애니메이션 라이브러리euid.notion.site

CRA (Create React App): React 프로젝트의 기본 설정을 쉽게 커스터마이즈할 수 있게 해주는 도구 프로젝트 설정(ex. Webpack, Babel)을 자동으로 관리해 준다. 👉  복잡한 설정 없이 바로 기본 리액트 프로젝트를 만들 수 있다. 그러나 CRA는 기본적으로 설정 파일이 감춰져 있어  Webpack, Babel 등의 세부 설정을 변경하고자 할 때는 제한이 있다. 👉 CRACO를 사용하면 CRA의 설정 파일을 직접 수정하지 않고도 프로젝트의 설정을 커스터마이즈할 수 있다.   CRACO (Create React App Configuration Override): CRA의 한계를 보완하기 위해 사용되는 도구CRA의 설정을 수정하고 싶을 때 CRACO를 사용하면, CRA의 기본..

📌 리액트 라이브러리 모음   ✅UI 템플릿 라이브러리리shadcn/ui: Radix UI와 Tailwind CSS를 기반으로 한 React UI 컴포넌트 라이브러리 스타일은 Tailwind CSS로 쉽게 꾸밀 수 있고, 기능은 Radix UI를 기반으로 해서 접근성도 잘 갖춰져 있다. shadcn/uiBeautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.ui.shadcn.com   MUI: 리액트 UI를 모아둔 라이브러리 MUI: The React component library you always wantedMUI provides a simple, c..

📌 Zustand : React에서 상태를 관리하기 위한 경량의 상태 관리 라이브러리 상태 스토어(store)를 쉽게 만들 수 있다.상태 스토어(store): 애플리케이션의 상태를 저장하고 관리하는 중앙 저장소상태 스토어를 사용하면 애플리케이션의 여러 컴포넌트에서 동일한 상태를 공유하고 관리할 수 있다.글로벌 상태를 내부에서 관리할 수 있다.장점독선적이지 않고, 특정 작업 방식을 강요하지 않는다.사전에 작성해야 할 예열(boilerplate) 코드가 적다.컨텍스트 프로바이더(provider)에 의존하지 않는다.컨텍스트(context)를 사용하는 것보다 더 빠르다.기본적으로 상태를 병합(merge)해 구문 작성이 편리하다.미들웨어(middleware)를 사용해 확장(extendable)할 수 있다.  ✨..

📌 lazy(): 컴포넌트를 지연 로딩(lazy loading)하기 위해 사용 로딩 중인 컴포넌트 코드가 처음으로 렌더링 될 때까지 연기할 수 있다. 기본적으로 리액트 애플리케이션은 컴포넌트를 한꺼번에 모두 로드한다. ➡︎ 이로 인해 초기 로딩 시간이 길어질 수 있다. ➡︎ 이를 해결하기 위해 React.lazy를 사용한다.👉 React.lazy는 동적으로 컴포넌트를 로드할 수 있다. 👉 해당 컴포넌트가 실제로 필요할 때(렌더링할 때)까지 로드되지 않는다.반드시 Suspense와 함께 사용된다. ✨ Suspense: 컴포넌트의 로딩 상태를 처리하기 위한 컴포넌트비동기 작업이 완료될 때까지 기다리는 동안 사용자에게 보여줄 UI를 결정하는 역할React.lazy를 사용해 동적으로 로딩되는 컴포넌트를 ..

📌 컴포넌트 external 속성 : 부모 컴포넌트가 자식 컴포넌트에 전달하는 속성(props) 주로 링크 컴포넌트에 `isExternal` 속성 부여외부 링크와 내부 링크를 구분하기 위해 사용외부 링크isExternal 속성이 true로 설정된 경우 ➡︎ 외부 링크👉 target="_blank" 속성을 설정하여 링크가 새 탭에서 열리도록 할 수 있다.내부 링크isExternal 속성이 설정되지 않은 경우 ➡︎ 내부 링크👉 target="_self" 속성을 설정하여 현재 탭에서 열리도록 할 수 있다.   ✅ 사용 1. 상위 컴포넌트에서 해당 컴포넌트에 isExternal 속성 설정 Zustand {' '}   2. 설정 지정 noopener : 새 탭에서 열린 페이지가 원래 페이지의 wi..

📌 react-icons: React에서 아이콘을 쉽게 사용할 수 있게 해주는 라이브러리react-icons는 여러 아이콘 라이브러리에서 제공하는 아이콘들을 React 컴포넌트 형태로 제공한다.➡︎ JSX에서 직접 사용할 수 있다.➡︎ 아이콘의 크기, 색상, 스타일 등을 CSS로 제어할 수 있다.필요한 아이콘만 임포트하여 사용할 수 있어서 전체 라이브러리를 임포트하는 것보다 경량화된 애플리케이션을 만들 수 있다. React Icons react-icons.github.io  ⏩ 설치 npm install react-icons --save   ✅ 사용1. 원하는 아이콘 컴포넌트 불러오기 import { FaBeer } from 'react-icons/fa'; // FontAwesome 아이콘 임포트  ..