[데브코스/TIL] DAY46~49 - React

🍑 트랜스파일러 & 모듈 번들러

1. 트랜스 파일러

• 서로 다른 언어 규약으로 작성된 파일을 웹 브라우저가 이해할 수 잇는 형태의 파일로 변환해주는 역할
  • JSX를 JS 코드로 변환
  • 최신 버전의 JS, TS 문법을 다운그레이드하여 변환
• 예시) 바벨, swc

2. 모듈 번들러

• 여러 개의 프로젝트 파일들을 각 종류 별로 하나의 파일로 묶어주는 역할
• 묶어주는 과정에서 사용하지 않는 파일들을 제거해줌 (트리세이킹) ⇒ 빌드 속도, 성능 향상
• 묶어주는 과정에서 이미지에 대한 용량 최적화 진행 (public 폴더는 제외)
• 예시) 웹팩, vite(웹팩보다 더 빠르고 리액트와 궁합이 좋음)

🍑 Tailwind 관련 플러그인

• tailwind-merge : 스타일 충돌없이 tailwind css 클래스를 js로 효율적으로 병합하는 유틸리티 함수
• tailwind-linecamp : 말줄임표 처리 도움. 현재는 기본 내장
• tailwind-forms : Tailwind의 기본 폼 스타일을 추가해주는 패키지

1. Tailwlind 관련 추가 설정

• 모바일에서의 hover 스타일 막기

  • tailwind.config.js 파일에 아래 코드 추가

    module.exports = {
      future: {
        hoverOnlyWhenSupported: true,
      },
    }

🍑 폰트 적용하기

1. 구글 폰트

• 구글 폰트 사이트에서 <link> 태그 복사 ⇒ head 태그 안에 붙여넣기
  • preconnect 속성 : 브라우저가 특정 외부 리소스를 더 빨리 로드할 수 있도록 함
• 구글 폰트 사이트에서 @import 코드 복사 ⇒ css의 제일 상단에 붙여넣기
  • https://링크&display=swap
• font-display : 웹 폰트를 사용할 때 글꼴 로딩 전략 ⇒ FOUT 문제 해결 가능
  • swap : 기본 글꼴로 먼저 표시 → 웹 폰트로 대체
  • auto : (기본값) 브라우저가 최적의 동작 판단
  • block : 폰트 로딩 중 텍스트 숨김(FOIT 발생 가능)
  • fallback : 폰트 로드 시간이 너무 길면 기본 글꼴 유지
  • optional : 네트워크 상태에 따라 웹 폰트 로드 생략

2. 눈누 폰트

• 눈누 사이트에서 font-face 복사

  @font-face {
    font-family: 'font';
    src: url('https://링크.woff') format('woff');
    font-weight: 400;
    font-style: normal;
  }
  
  .font {
    font-family: "font";
  }

  <h1 className="font">Hello World</h1>

3. 로컬 폰트

• 폰트를 다운로드하고 src 폴더 하위에 위치시키기
• font-face 등록

  @font-face {
    font-family: "font";
    src: url("../assets/fonts/font.woff2") format("woff2"),
  	  url("../assets/fonts/font.woff") format("woff");
  	font-weight: normal;
  	font-style: normal;
  }
  
  .font {
    font-family: "font";
  }

  <h1 className="font">Hello World</h1>

  • woff (web open font format) : 기존 폰트 파일 형식 + zlib 압축 알고리즘 사용하여 압축한 파일. 오래된 브라우저와의 호환성 좋음
  • woff2 : woff보다 더 높은 압축률 제공. 오래된 브라우저에서 지원하지 않을 수 있음

🍑 스타터 팩

• 버전 관리에 지속적으로 신경써야 함.

1. 프로젝트의 의존성 관리

• npm 모듈 버전 확인 : npm outdated
• npm 최신 버전 확인 : npm i npm-check 설치 / npx npm-check 실행
  • import 하고 있지 않는 패키지를 체크하고 알려줌
  • 단점 : 애초에 import를 할 필요 없는 라이브러리까지 알려줌
• 버전 업데이트 : npx npm-check-updates 모듈명 -u
  • 특정 라이브러리의 호환성을 맞춰줄 수 있는 명령어

🍑 npm & npx & yarn

• npm : Nodej.s의 기본 패키지 관리자
• npx : 패키지 실행 및 없으면 npm으로 설치
• yarn : 병렬로 패키지를 설치하여 npm 보다 속도 향상. 이전에 설치된 패키지를 다시 다운로드하지 않고 설치 가능
• pnpm : npm의 발전된 버전

🍑 시맨틱 버저닝 (SemVer)

• 소프트웨어의 버전 변경 규칙
• Major Minor Patch 순서
  • Major : 하위 버전과의 호환 불가
  • Minor : 하위 호환성을 지키면서 기능 추가
  • Patch : 하위 호환성을 지키면서 버그 수정
• 범위 지정 - 틸드 범위 (~)
  • Minor 버전이 지정 O ⇒ Patch 레벨 변경 허용
  • Minor 버전이 지정 X ⇒ Patch + Minor 레벨 변경 허용
  • ex) ~1.3.2 : Minor 지정 O ⇒ Patch 레벨 변경 허용
  • eX) ~2 : Minor 지정 X ⇒ Minor 레벨 변경 허용
• 범위 지정 - 캐럿 범위 (^)
  • 가장 왼쪽에 0이 아닌 요소를 수정하지 않는 범위로 변경을 허용
  • ex) ^1.3.x : Minor + Patch 레벨 변경 허용
  • ex) ^0.1.x : 0이 아닌 처음 요소는 Minor ⇒ Patch 레벨 변경 허용
  • ex) ^0.0.3 : 0이 아닌 처음 요소는 Patch ⇒ 변경 허용 X

🍑 이미지 경로

• src 폴더나 public 폴더에 넣을 수 있음
• 어떤 폴더에 넣느냐에 따라 활용 방법이 달라짐
• 폴더 별 특징
  • public 폴더 : 공용으로 사용 가능. 배포 후, 도메인을 통한 접근 가능
  • src/assets 폴더 : 공개적으로 노출 X (오로지 리액트 시스템 내부에서 활용). 빌드 과정에서 자동으로 이미지를 최적화 하여 public 폴더에 삽입됨
• 결론 : 빌드 프로세스에 의해 처리되지 않는 이미지는 public 폴더로 (주로 파비콘). 그 외는 src/asseets 폴더 하위로

1. src 폴더 하위

• 모듈 번들러(웹팩 등)에 의해 처리되어, 빌드 결과에 포함됨 (이미지 파일명의 변동 발생)
• JSX에서
  • import를 통해 사용 / 번들러의 관리 대상 ⇒ 이미지 경로가 자동 처리
  • 직접 경로를 넣는 건 불가능 / 번들링 과정에서 위치나 파일명의 변경되어 올바르게 연결 불가 ⇒ 번들러가 이를 처리해줄 수 없음
• CSS에서
  • 직접 경로 넣어 사용(상대 경로) / 번들러의 관리 대상 ⇒ 경로를 자동으로 수정
• HTML에서
  • 직접 경로 넣는 건 불가능 / 번들러의 관리 대상 X ⇒ 경로를 자동으로 수정 X

2. public 폴더 하위

• 공용 폴더이기 때문에 절대 경로 접근 가능 ⇒ img 태그에 직접 경로 삽입 가능
• / 로 시작할 경우 public 폴더로 인식
• JSX : import 가능. 직접 경로 넣기 가능
• CSS : 직접 경로 넣기 가능
• HTML : 직접 경로 넣기 가능

🍑 리액트에서의 변수

1. 변수 변경

• 변수의 값이 변경되어도 화면에서는 변경 사항이 반영 X ⇒ 변경사항을 추적하지 않기 때문
• 리액트에서 변수를 선언할 때 2가지로 구분
  • 화면 렌더링에 영향을 주는 변수인지 ⇒ 이를 state(상태)라 함
  • 화면 렌더링에 영향을 주지 않는 변수인지 ⇒ let, const, var

2. 상태 정의 및 관리

• 16.8버전에 도입된 리액트 훅을 이용하여 상태를 정의하고 관리함

🍑 리액트 훅

1. useState

• const [state, setState] = useState(초기값) : 상태와 상태 변경 함수를 배열로 반환
• setState를 통해 상태를 변경하는 방법 2가지
  • 원하는 값을 직접 지정하여 변경 ⇒ setState(값)
  • 현재 상태를 이용하여 변경 ⇒ setState((state) => state + 1)
• 상태 업데이트는 비동기적으로 처리되기 때문에 즉시 업데이트 되지 않음 (효율을 위해 한번에 처리)
• state는 불변성을 지켜야 하므로, 수정하지 않도록 유의

2. useRef

• document.querySelector 같은 역할
• 직접 DOM에 접근하지 않는 이유 : 리액트는 가상 DOM을 사용하기 때문에 직접적인 접근 불가능

🍑 폼 제어 방법

• 제어 컨트롤러 : 상태를 정의하여 요소 제어 ⇒ useState
• 비제어 컨트롤러 : DOM에 접근하여 요소 제어 ⇒ useRef

  function App() {
  	const ref = useRef<HTMLInputElement | null>(null);
  	const submitHandler = (e: React.FormEvent<HTMLFormElement>) => {
  		e.preventDefault();
  		console.log(ref.current?.value);
    }
  
  	return (
  		<form onSubmit={submitHandler}>
  			<input ref={ref} />
  		</form>
  	)
  }

🍑 용어

• 프레젠테이션 컴포넌트 : 받아온 props를 사용하지 않고, 바로 자식 컴포넌트에 넘겨주는 역할만 수행

📌 출처

수코딩(https://www.sucoding.kr)