한 걸음씩

▷ 기본 훅 useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue ▷ 커스텀 훅 React 컴포넌트에서 공통된 로직을 분리하여 재사용성을 높이고, 컴포넌트의 로직을 더욱 간결하고 가독성 있게 작성할 수 있도록 도와줌. 보통 'use'로 시작하는 이름을 갖고 있으며, 기존의 훅들을 조합하거나 외부 라이브러리와 함께 사용하여 다양한 기능을 제공할 수 있다 ▷ useState 리액트에서 기본으로 제공되는 훅 항상 2개의 value를 반환 첫 번째 value는 변수, 두 번째 value는 변수를 변경시킬 함수 import React, { u..

▷ 아직 리액트 애플리케이션 생성을 하지 않은 경우 1. 타입스크립트 기반의 리액트 애플리케이션을 생성하는데 사용된다 npx create-react-app my-app --template typescript 2. styled-components를 타입스크립트 프로젝트에서 사용할 수 있도록 설치 styled-components 타입을 타입스크립트가 이해할 수 있도록! npm i --save-dev @types/styled-components 3. styled-components 라이브러리를 CSS-in-JS 방식으로 프로젝트에서 사용할 수 있도록 설치 ※ CSS-in-JS 방식: 자바스크립트 코드 내에서 스타일을 작성하는 방식 npm i styled-components ▷ 진행 중이던 리액트 프로젝트에 타..

▷ styled components 설치 명령어 npm i styled-components ▷ stlyed comonents 스타일 적용 방법 ① const Name = styled.div`CSS 스타일 작성` : 'styled 객체를 사용하여 '"HTML태그"를 스타일링. Name컴포넌트는 div 태그로 랜더링되어 해당 스타일이 적용 ② const Name2 = styled(Name1)`CSS 스타일 작성` : 다른 styled-components 컴포넌트의 스타일을 상속하여 재사용할 수 있다. Name2 컴포넌트는 Name1 컴포넌트의 스타일을 상속받아 추가적으로 스타일을 정의한다. ③ const Name = styled(Name1).attrs({ HTML 속성을 작성 })`CSS 스타일 작성` : ..

1. GitHub 저장소 생성 및 클론 → GitHub에 새로운 저장소를 생성한 후 로컬 환경으로 클론 한다. 2. 리액트 애플리케이션 생성 → 리액트 애플리케이션을 생성하고 개발을 진행한다 3. GitHub Pages 설정 'package.json' 파일에 "homepage" 속성을 추가한다. 이것은 배포된 애플리케이션이 호스팅될 주소를 지정하는 것이다. 예를 들어, Github 사용자명이 'my-username'이고 저장소 이름이 'my-repo'인 경우에 다음과 같이 추가한다. "homepage": "https://my-username.github.io/my-repo/" 4. 빌드 스크립트 설정 'package.json' 파일의 "scripts" 항목에 배포 스크립트를 추가한다. 배포 스크립트는 '..

routes폴더에서 만드는 파일들은 주로 라우팅과 관련된 정보들을 가지고 있다. 라우팅은 사용자가 웹 애플리케이션 내에서 다른 페이지로 이동하는 기능을 의미하며 'react-router-dom' 라이브러리를 사용한다. components폴더에서 만드는 파일은 직접적으로 화면에 표시될 부분이다. 각 컴포넌트는 독립적으로 재사용 가능한 기능을 갖고 있고, 이러한 컴포넌트들을 조합하여 전체 애플리케이션을 구성한다. // index.js import React from 'react'; import {createRoot} from 'react-dom/client'; import App from './App'; import "./styles.css"; const root = createRoot(document.ge..