230809 Styled-components React-TypeScript

1) Styled-components

• 스타일 관련 코드 작성 시, 효율성
• props 형태로 속성전달 가능
• 태그명 변경 가능 (*as)
• 복수 컴포넌트 스타일 변경 가능 (*attrs)
• scss 프로세스 적용 가능 (*&)
• 하위 속성의 스타일 컴포넌트에만 별도의 기능 부여
• 테마 기능 사용 (ThemeProvider)

2) TypeScript

• Props는 객체
• Props 타입 정의는 거의 대부분 interface 형식
• Props 타입 정의와 스타일 컴포넌트의 타입 정의를 위한 interface는 별도 관리 지향
• interface로 객체 타입 관리 시, 선택적 프로퍼티 존재
• 디폴트 프로퍼티 활용 / 부모요소에서 값을 전달하지 않더라도 값을 적용할 수 있다
• 자바스크립트 문법:
  단락회로평가
  논리회로평가(nullish operator=??)) (*우좌항 값 선택 시 사용)
  

3) TypeScript-Hooks

• useState<>()
• d.ts
  : 외부 패키지 혹은 라이브러리를 통해서 모듈값을 가져오고자 할 때, 그리고 해당 모듈값을 타입으로 정의하고자 할 때, 기본적으로 노드는 타입스크립트를 모르기 때문에 d.ts 타입을 활용해서 타입정의

styled.d.ts

// import original module declarations
import 'styled-components';
// and extend them!
declare module 'styled-components' {
  export interface DefaultTheme {
    textColor: string;
    bgColor: string;
  }
}

theme.tsx

import { DefaultTheme } from "styled-components";
const lightTheme: DefaultTheme = {
  bgColor: 'white',
  textColor: 'black',
}
const darkTheme: DefaultTheme = {
  bgColor: 'black',
  textColor: 'white',
}
export {lightTheme, darkTheme};

index.tsx

...
import { ThemeProvider } from 'styled-components';
import { lightTheme, darkTheme } from './theme';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

App.tsx

import './App.css';
import styled from 'styled-components';
import { useState } from 'react';
const Container = styled.div`
  background-color: ${props => props.theme.bgColor};
`;
const H1 = styled.h1`
  color: ${props => props.theme.textColor};
`;
function App() {
  return (
    <div>
      <Container>
        <H1>Hello</H1>
      </Container>
    </div>
  );
}
export default App;

4) 리액트 라우터

참고링크
https://velog.io/@rmaomina/react-router-createBrowerRouter

npm i --force react-router-dom@latest

: 가장 최신 버전 설치

BroserRouter

: 단순 페이지 분기를 목적

createBrowserRouter

: 각 페이지를 배열형태로 정의

• 각 페이지를 분기시키는 Router를 배열객체 형식으로 표현할 수 있게 하는 함수(*컨테이너 형식, 부모경로&자식경로)

RouterProvider

: Router를 Props 형태로 전달받아 전역 컴포넌트에 제공

Outlet

• react router는 Outlet 컴포넌트를 통해서 url 경로를 찾아가게됨
• Outlet 컴포넌트는 렌더링하고자 하는 route의 경로값을 받아 웹 브라우저 화면에 렌더링

useNavigate vs Link

💰 비트코인 거래 사이트 만들기

react-query 설치

npm i --force react-query

useState()

: 웹 페이지가 새롭게 새로고침이 될 때마다 값을 웹브라우저에 출력시키고 싶을 때 사용하는 리액트 훅

useEffect()

: 특정 시기에 코드를 실행시키기 위해 사용하는 리액트 훅 ->
*특정 시기를 정의하게 만드는 요소: 의존성배열