React 기본 (초기 세팅)

1. React.Fragment

• 컴포넌트가 여러 엘리먼트를 return 할때 jsx규칙상 하나의 태그로 묶어서 return 해줘야 한다. 이때 fragment를 사용하면 dom에 별도의 노드를 추가하지 않고 여러자식을 그룹화 할 수 있다.

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

1) short syntax ->빈태그 적어준다.

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

yarn add sass classnames react-icons 

(sass, 조건부 스타일링 위한 classnames, 아이콘)

2. React reset.css 설정 방법

https://im-designloper.tistory.com/77

[ REACT ] reset css 하는 방법 + npm으로 설치

 

3. React Scss 설정

https://velog.io/@roong-ra/React-06.-SCSS-%ED%99%98%EA%B2%BD%EC%84%A4%EC%A0%95

React 06. SCSS 환경설정

 

4. react-hook-form유효성 검사

https://www.daleseo.com/react-hook-form/

React Hook Form 라이브러리 사용법

 

5. react - ESLint 설정방법

https://www.daleseo.com/eslint-config/

ESLint 상세 설정 가이드

https://cocoze.tistory.com/108

eslint의 import/no-unresolved 옵션은 무엇일까?

6. Material UI

https://mui.com/material-ui/getting-started/installation/

Installation - Material UI

7. 라우터 적용

8. pages 폴더, component 폴더 구분 후 template 만들기