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으로 설치
reset css를 하는 이유 브라우저마다 태그를 렌더링하는 기본 스타일이 다르고, 기본 padding,margin값들 이 적용되어 있는 부분을 초기화 하기위해 style 기본값을 0으로 만들고 list,a태그에 기본적으로
im-designloper.tistory.com
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 환경설정
리액트에서 SCSS 전처리기를 사용하기 위해 다음과 같은 설치과정이 필요하다.
velog.io
4. react-hook-form유효성 검사
https://www.daleseo.com/react-hook-form/
React Hook Form 라이브러리 사용법
Engineering Blog by Dale Seo
www.daleseo.com
5. react - ESLint 설정방법
https://www.daleseo.com/eslint-config/
ESLint 상세 설정 가이드
Engineering Blog by Dale Seo
www.daleseo.com
https://cocoze.tistory.com/108
eslint의 import/no-unresolved 옵션은 무엇일까?
React.js로 개발을 하다 절대 경로 설정을 추가하게 되었다. TypeScript의 경우 tsconfig.json 파일을, JavaScript의 경우 jsconfig.json 파일만 추가하면 되었기 때문에 그리 어렵지 않게 설정할 수 있었다. 하지
cocoze.tistory.com
6. Material UI
https://mui.com/material-ui/getting-started/installation/
Installation - Material UI
Install Material UI, the world's most popular React UI framework.
mui.com