All'alba vincerò

At dawn, I will win!

2024/08/24 6

[React] clsx(): 클래스 이름(className)을 조건부로 결합 & 관리하는 유틸리티 함수

📌 clsx(): 자바스크립트에서 조건부로 클래스 이름을 결합하고 관리하는 데 사용되는 유틸리티 함수 여러 개의 클래스를 조건에 따라 동적으로 쉽게 결합할 수 있도록 도와준다. 불필요한 빈 문자열이나 null, undefined 같은 값들을 자동으로 걸러준다. 조건부 UI를 만들 때 매우 유용하다. 주로 React 프로젝트에서 많이 사용한다.  ⏩ 설치 npm install --save clsx   ✅ 사용 clsx 불러오기 import clsx from 'clsx';// orimport { clsx } from 'clsx';   ☑️ 기능 여러 개의 문자열 결합 clsx('foo', 'bar'); // 'foo bar' 배열 형태로 클래스 이름 결합clsx(['foo', 'bar']); // 'foo..

Javascript 2024.08.24

[React] 컴포넌트의 external 속성

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

React 2024.08.24

disabled 속성: 요소의 상호작용 제어

📌 disabled 속성 : HTML 및 React 컴포넌트에서 요소의 상호작용을 제어하는데 사용 요소가 사용자 상호작용을 받을 수 없도록 만든다.주로 버튼, 입력 필드, 선택 상자 등과 같은 사용자 인터페이스(UI) 요소에 적용한다.기능상호작용 비활성화disabled 속성이 설정된 요소는 사용자가 클릭하거나 입력할 수 없게 된다. ex) 버튼이 disabled 상태일 때, 사용자는 그 버튼을 클릭할 수 없다.스타일링브라우저는 disabled 상태인 요소에 대해 기본적으로 시각적으로 구분되도록 스타일을 적용한다.일반적으로 disabled 상태인 버튼은 흐릿해지거나 회색으로 표시된다.폼 제출 방지disabled 속성이 설정된 입력 필드는 폼이 제출될 때 해당 데이터가 전송되지 않도록 한다.➡︎ 비활성화된..

HTML 2024.08.24

[React] React 아이콘 라이브러리: react-icons

📌 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 아이콘 임포트  ..

React 2024.08.24

[React] React Router 라이브러리(3) : 데이터 가져오기(Loader) / 데이터 업데이트(Action) / 폼 검증(Form Validation)

📌 React Router 라이브러리프로덕션용으로 사용 가능한 싱글 페이지 앱을 구현(SPA)하기 위한 React Router 라이브러리URL이 변경돼도 싱글페이지로 렌더링 하는 기능을 지원  ☑️ 데이터 가져오기 (Loader)⏩ loader() 함수: 특정 라우트가 렌더링되기 전에 데이터를 비동기적으로 로드하는 데 사용 서버에서 데이터를 가져오거나 비동기 작업을 처리한 후 페이지를 렌더링할 수 있도록 한다loader()는 특정 라우트가 활성화되기 전에 필요한 데이터를 미리 로드한다.➡︎ 페이지가 로드될 때 필요한 데이터가 이미 준비되어 있어 사용자에게 빠르게 콘텐츠를 제공한다. 특징비동기 데이터 로딩: loader()는 비동기 함수를 지원하여, 데이터를 비동기적으로 가져올 수 있다.라우트 기반 데이..

React 2024.08.24

[React] React Router 라이브러리(2) : 검색엔진최적화(SEO) 설정 / 네비게이션 상태 확인 / 다이내믹 세그먼트(Dynamic Segment) 설정

📌 React Router 라이브러리프로덕션용으로 사용 가능한 싱글 페이지 앱을 구현(SPA)하기 위한 React Router 라이브러리URL이 변경돼도 싱글페이지로 렌더링 하는 기능을 지원  ☑️ 검색엔진최적화(SEO) 설정 ⏩ react-helmet-async 활용: React 애플리케이션에서 동적으로 HTML 를 관리할 수 있게 해주는 라이브러리 리액트의 단점 ➡︎  React는 하나의 index.html을 두고 있기 때문에 페이지 마다 페이지를 설명하는 메타태그를 설정하기 어렵다. ➡︎ SEO가 어렵다. SEO(검색 엔진 최적화)와 소셜 미디어 공유를 위해 메타 태그, 타이틀, 링크 태그 등을 관리할 때 사용 기존의 react-helmet 라이브러리를 비동기적으로 사용할 수 있도록 개선한 버전..

React 2024.08.24