[TIL] 20240529 - bookstore 프로젝트(1)

프로젝트 디렉토리 구조

---

pages : 라우트에 대응하는 페이지 컴포넌트(컨테이너)

components : 공통 컴포넌트, 각 페이지에서 사용되는 컴포넌트

utils : 유틸리티

hooks : 리액트 훅

model : 모델(타입)

api : api 연동을 위한 fetcher 등

package.json

---

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
  }

기본

• start : 개발 모드로 프로그램 실행

• build : 배포 환경에서 사용할 파일 생성

• test : 테스트 코드 실행

• eject : 내부 설정 파일을 노출하여 babel, webpack 설정 변경

추가

typecheck : typescript는 타입 체크가 필요함

"typecheck": "tsc --noEmit --skipLibCheck"

tsc : TypeScript 컴파일러를 실행하는 명령어

• --noEmit : 컴파일러 출력 파일 생성을 비활성화
• --skipLibCheck : 외부 라이브러리 타입 체크 생략

children props

---

children props는 컴포넌트의 여는 태그와 닫는 태그 사이의 내용

🧊 children props type

React.ReactNode > React Element > JSX.Element

JSX.Element

JSX.Element는 React Element를 상속받는 인터페이스로 가장 제한적인 유형
→ primitive 타입의 데이터는 전달 불가능

React.ReactChild

React.ReactChild는 JSX.Element, string, number 포함
→ 배열과 같은 타입의 데이터는 불가능

React.ReactNode

모든 타입을 전달 가능

global style, styled component

---

🧊 global style

global : 프로젝트 전체에 적용하여 프로젝트에 일관된 스타일링을 적용

• 에릭마이어의 reset css
• normalize.css
• sanitize.css
  
  

sanitize.css

Install

npm install sanitize.css --save

--save : package.json의 dependency 항목에 모듈을 추가

Import

import 'sanitize.css';

🧊 styled component

---

Install

npm install styled-components

Use

import { createGlobalStyle } from "styled-components"; 

export const GlobalStyle = createGlobalStyle`
  body {
    padding: 0;
    margin: 0;
  }
`;

theme

---

1. UI, UX의 일관성 유지

2. 유지보수가 용이

3. 확장성

4. 재사용성

5. 사용자 정의
   
   

🧊 Theme Swicher with Context API

1. 사용자는 토글 UI를 통해 웹사이트의 색상 테마를 바꿀 수 있다.
2. 색상 테마는 전역상태로 존재한다.
3. 사용자가 선택한 테마는 로컬스토리지에 저장한다.
   
   

createContext

import { createContext } from "react";

interface State {
  themeName: ThemeName;
  toggleTheme: () => void;
}

export const state = {
  themeName: "light" as ThemeName,
  toggleTheme: () => {}
};

export const ThemeContext = createContext<State>(state);

useContext

import { useContext } from "react";
import { ThemeContext } from "../../context/themeContext";

function ThemeSwitcher() {
  const { themeName, toggleTheme } = useContext(ThemeContext);

  return (
    <button onClick={toggleTheme}>{ themeName }</button>
  );
};