20210830 TIL

실전 리액트 프로그래밍

[CSS 작성 방법 결정하기]

• 일반적인 CSS 파일로 작성하기 - 이름 충돌할 수 있음
• css-module로 작성하기
  • 이름 뒤에 해쉬가 붙음(고유한 이름 갖게 됨)
  • className 입력 불편함
    -> classnames라는 패키지 이용
    (npm install classnames)

import React from 'react';
import Style from'./Box.module.css';

export default function Button({size}) {
    if (size === 'big') {
        return <button className={`${Style.box} ${Style.big}`}>큰 박스</button>;
    } else {
        return <button className={`${Style.box} ${Style.small}`}>작은 박스</button>;
    }
}

• Sass로 작성하기

npm install node-sass
npm install node-sass@4.14.1 // CRA로 만들어진 프로젝트는 5.0버전과 충돌하기 때문에 4.xx 버전으로 깔아야 함

• css-in-js로 작성하기
  styled-components 설치

npm install styled-components

import React from 'react';
import styled from 'styled-components';

const BoxCommon = styled.div`
    height: 50px;
    background-color: #aaaaaa;
`;

const Boxbig = styled(BoxCommon)`
    width: 200px;
`;

const BoxSmall = styled(BoxCommon)`
    width: 100px;
`;

export default function Box({size}) {
    if (size === 'big') {
        return <Boxbig>큰 박스</Boxbig>;
    } else {
        return <BoxSmall>작은 박스</BoxSmall>;
    }
}

[단일 페이지 어플리케이션(SPA) 만들기]

• SPA가 가능하기 위한 조건

  • 자바스크립트에서 브라우저로 페이지 전환 요청을 보낼 수 있다.

    • 단, 브라우저는 서버로 요청을 보내지 않아야 한다.

  • 브라우저의 뒤로 가기와 같은 사용자의 페이지 전환 요청을 자바스크립트에서 처리할 수 있다.

    • 이때도 브라우저는 서버로 요청을 보내지 않아야 한다.

• 위 조건을 만족시켜주는 브라우저 API

  • pushState, replaceState 함수

  • popState 이벤트

react-router-dom 설치

npm install react-router-dom

ANIMAN 클론코딩

• 카테고리에 따라 가져오기, 상품 상세 페이지 구현

드림코딩 TS

• 다이얼로그 만들기
• 다이얼로그 컨텐츠 채우기
• 코드 중복 제거, 깔끔하게 리팩토링
• 반복적으로 쓰이는 코드 복사 > 함수로 만들어 준다 > 차이점을 함수의 인자로 받는다
• 스타일링
• 드래깅 기능 구현(드래그와 드랍 기본 이벤트, 포지션 바꾸기)
• Decorators