카테고리 없음

3단원 정리[1] Do It 리액트 모던 웹 개발 with 타입스크립트 (리액트) 공부

ㅋ ㅅㅋ 2024. 11. 17. 19:37

1. 리액트 컴포넌트의 CSS 스타일링

[ 1 ] 컴포넌트 스타일링

 

1. 부트스트랩 사용해 보기

부트스트랩과 같은 CSS 프레임워크를 사용 할 때가 많습니다. 부트스트랩을 사용하는 법은 공식홈페이지(getbootstrap.com)에서 첫번째 메뉴인 [Docs]를 클릭합니다. 이어서 문서 중간즘 CDN links 부분에 있는 CSS경로를 복사합니다.

 

중간 쯤으로 스크롤을 내리면 보인다.

 

그리고 나서 public 디렉터리에 index.html 파일에 다음처럼 붙여 넣으면 됨

주석에 부트스트랩 추가 부분을 추가하였다.

 

2. 부트스트랩 컴포넌트 구현하기

이제 부트스트랩 문서에서 [Forms -> Overview]를 클릭합니다. 본문 Overview 단원 아래에 있는 HTML 코드를 복사하여 src/pages/BootStrap.tsx return문 뒤로 붙여넣기를 합니다.

그러면 오류가 곳곳에 빨간줄로 나타나는데 이오류들을 해결해보기로하겠습니다.

 

빨간오류들

 

3. 리액트 className과 htmlFor속성

 

JSX문은 React.createElement 함수 호출 코드로 전환됩니다. 그런데 이 전환 과정에서 자바스크립트(혹은 타입스크립트) 키워드인 class와 for이 혼란을 줍니다. 그래서 리액트에서는 다음처럼 class 대신 className, for대신 htmlFor이라는 속성명을 사용해야합니다.

 

노란색으로 칠한부분과 빨간색 동그라미 친 부분 참조

 

결과 화면

 

[ 2 ] 컴포넌트 스타일링

1. 웹팩과 CSS 파일 임포트

 

부트스트랩의 .css파일을 <link> 태그의  herf 속성에 설정하는 형태로 사용했습니다.

하지만 리액트 프로젝트가 내부적으로 사용하는 웹팩은 .css파일을 좀 더 쉽게 사용 할 수 있습니다.

웹팩은 이미지와 CSS, 자바스크립트 또는 타입스크립트 코드가 혼합된 프로젝트를 좋게 만들어줍니다

특히 웹팩은 타입스크립트 코드에서  import문 형태로 CSS파일을 <link> 태그 없이 사용 할 수 있게 해줍니다.

 

import React from 'react';
import './index.css';

위 와 같은 방식으로 사용이 가능합니다.

 

[ 3 ] CSS 기본 구문

CSS도 '언어'라서 작성하는 방법과 규칙이 있습니다.

1. CSS 작성방법은 '선택자'를 설정하고, 선택자 뒤에 중괄호 {}를 사용하여 감싸 줍니다.

2. 그런다음 color와 같은 스타일의 속성의 이름과 설정값을 콜론(:)으로 구분을 하고

3. 마지막으로 세미콜론(;)으로 속성값이 끝났다는 것을 알립니다.

예시)
CSS 기본 구문 <p> 태그에 CSS 설정하는 예
선택자 {
   스타일_속성명1: 속성값1;
   스타일_속성명2: 속성값2;
......
}		 p {
   color: red;
   font-size: 14px;
   line-height: 20px;
}

 

스타일 속성 이름은 color처럼 소문자로 시작해야 하며, 2개 이상 단어로 된 속성 ex) background-color처럼 소문자 스네이크 표시법으로 사용합니다.

 

[ 4 ] 선택자란 ?

CSS 선택자는 종류가 많은데 '전체 선택자', '유형 선택자', '클래스 선택자'가 대표적입니다.

 

1. 전체선택자

CSS코드에서는 선택자로 * 기호를 사용합니다. 이는 HTML 문서의 모든 태그를 한꺼번에 선택하는 용도로 사용합니다.

이때 *를 전체선택자라고 합니다.

* {
   box-sizing: border-box;
}

 

2. 유형 선택자

HTML태그 이름을 사용하는 선택자를 유형선택자라고 합니다.

h1, h2 {
   font-family: Roboto, 'time New Roman', sans-serif;
}

 

3. 클래스 선택자

선택자로 '.클래스명' 을 사용합니다. 이처럼 점(.)으로 시작하는 선택자를 클래스 선택자라고 합니다.

.wrapper {
  background-color: blue;
}
...
<div class='wrapper' />

 

[ 5 ] @import 규칙으로 아이콘 사용하기

CSS는 @import, @meida등 @으로 시작하는 구문을 제공하는데, 이런 구문을 앳 규칙 이라고 합니다.이 앳규칙은 <link rel='stylesheet' herf> 대신 .css 파일에서 다른 .css파일을 사용하고자 할 때 적용합니다.

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

코드 / 실행화면

[ 6 ] style 속성을 사용한 인라인 스타일링

 style이라는 속성에 문자열로된 CSS코드를 설정할 수 있으며 렌더링 때 해당코드가 반영됩니다.

그런데 style 속성을 설정하는 값은 문자열이 아닌 객체(스타일 객체라고 부름)여야 합니다. 

html코드 : <div style='width: 100px; height: 100px; background-color: blue' />

리액트용 스타일 객체 코드 : <div style={{width: '100px', height: '100px', background-color: 'blue'}} />

[ 7 ] Node.js 패키지 방식으로 아이콘 사용하기

@import방식의 한가지 문제점은 다른사이트에 호스팅된 외부 CSS 파일을 가져오므로 네트워크 속도에 영향을 받을 수 있습니다. 따라서 대부분의 웹어플리케이션은 node.js 패키지 형태로 구현된 CSS 프레임워크를 내장하는 형태로 배포합니다.

 

1. 웹 안전 글꼴과 fontsource

@import 규칙은 웹에 ㅇ안전한 글꼴, 즉 웹 안전 글꼴를 사용해야 한다는 제약이 있습니다. 

여기서 웹 안전 글꼴이란 데스크톱,모바일등 모든 장치에서 동작하는 모든 브라우저에 적용 할 수있는 글꼴 입니다.

또한 사용자 컴퓨터에 설치되지 않은 때에도 웹페이지에 항상 올바르게 표시되는 글꼴을 의미합니다. 구글이 제공하는 모든 글꼴은 웹 안전 글꼴이므로 @import규칙을 적용 할 수 있습니다.

 

그중에 하나인 fontsource는 구글 글꼴과 오픈소스 웹안전 글꼴을 패키지 형태로 설치해 줍니다.

npm i @fontsource/스네이크-표기법-글꼴명

 

2. 머터리얼 아이콘 설치하기 / 사용하기

@import의 규칙은 이제 사용할 필요가 없습니다.

npm i @fontsource/material-icons
이후에
import '@fontsource/material-icons' << 추가하기

근데 저걸 추가할때 index.css에 추가한 import url은 주석처리해야한다

 

[ 8 ] Icon 사용자 컴포넌트 구현하기

1 / 2 / 3

이렇게하면 오류가 납니다 이 오류를 해결해보겠습니다

 

name 속성 추가하기

 

style 속성 추가하기

name은 꼭 설정해야 하는 속성이지만, style은 선택 속성으로 이름뒤에 물음표(?)를 붙입니다.

 

[ 9 ] Icon 컴포넌트 개선하기

타입스크립트에서는 점 3개를 이어쓰는 ... 연산자를 제공합니다.

그런데 이 연산자를 쓰는곳이 '전개 연산자'로 사용될 때 있고 다음처럼 '잔여 연산자'로 사용 될 때도 있습니다.

 

클래스 선택자 사용하기

 

이렇게 코드를 작성을하면 에러가 나서 동작을 안하게된다 이코드를 동작시킬려면 Icon 컴포넌트에 className속성을 추가해 줘야 합니다. 리액트 프레임워크는 한꺼번에 특정 HTML 요소의 속성들 추가 할 수 있게 해주는 DetailedHTMLProps와 HTMLAttributes 타입을 제공합니다.

 

리액트가 제공하는 DetailedHTMLProps 와 HTMLAttributes 타입

span 요소의 정의
span: React.DtailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>. HTMLSpanElement>;

 

좀 더 읽기좋게 표하현하면

import type { FC, DetailedHTMLProps, HTMLAttributes } from 'react'

type ReactSpanProps = DtailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>. HTMLSpanElement>;

 

타입스크립트의 교집합 타입 구문

 

자바와 같은 객체지향 언어에서는 다음처럼 interface란 이름의 키워드로 ReactSpanProps를 선언하고 extends로 상속하는 형태로 만드는 구문이다

export interface IconProps extends ReactSpanProps {
   name: string
}

 

A|B는 'A또는 B인 타입'이라는 의미이고, A&B는 'A이고 B인 타입' 이라는 의미입니다.

export type IconProps = ReactSpanProps & {
  name: string
}

 

이렇게 사용하면 2가지타입의 교집합 이므로 위에 사진 코드에 에러를 해결 할 수 있다.