-
React 프로젝트 기본 세팅FW, Lib 공부/React 2022. 6. 22. 15:13
리엑트를 사용하면 개발자를 위한 여러 라이브러리가 많이 제공되고 있기 때문에 프로젝트를 본격적으로 진행하기 전에 미리 필요한 라이브러리를 설치하여 준비하는 것이 좋다.
아래에는 리엑트 프로젝트 만들 때 기본적으로 세팅하면 편한 라이브러리를 정리한다.
1. 리엑트 프로젝트 생성
리엑트는 다음의 커맨드로 typescript 기반 프로젝트를 생성하는 것이 좋다.
npx create-react-app <project_name> --template typescript
ts는 처음 사용하면 미리 지정해줘야 하는게 많아 자칫 귀찮게 생각할 수 있지만, 나중에 자동완성 기능이나, 런타임 이전에 에러를 발견하고 해결할 수 있다는 장점이 더 크기 때문에 사용하는게 좋다.
2. (option) 필요없는 파일 삭제
/src 폴더에 기본적으로 들어있는 파일 중 App.tsx, index.tsx, react-app-env.d.ts 파일을 제외한 나머지 파일은 필요 없다.
지워주면 깔끔하게 0인 상태부터 시작할 수 있기에 나는 지워줬다.
3. 라이브러리 설치
많이 사용하는 라이브러리의 리스트는 다음과 같다. (ts 안정화 기준)
라이브러리 이름 설치 커맨드 ts 적용 커맨드 styled-components npm i styled-components npm i --save-dev @types/styled-components react-router-dom (v5) npm i react-router-dom@5.3.0 npm i --save-dev @types/react-router-dom react-query npm i react-query@3.39.1 npm i --save-dev @types/react-query react-helmet npm i react-helmet npm i --save-dev @types/react-helmet react-trasnition-group npm i react-trasnition-group npm i --save-dev @types/react-transition-group recoil npm i recoil - 각 라이브러리에 대한 내용은 다음에 더 포스팅... 일단은 이렇게가 많이 사용된다.
간단하게 설명하자면,
styled-components 는 테마 적용 및 html 태그를 만드는데, css까지 포함된 컴포넌트를 만들 수 있게 해준다.
react-router-dom 은 주소창에 / 경로에 따라 다른 페이지를 보여줄 수 있도록 도와준다. (새로고침 없이)
react-query 는 서버와 통신할 때 그 과정을 간략화 해주고, 캐싱으로 api호출 빈도를 획기적으로 줄여준다.
react-helmet 은 html <head> 태그 안에 들어갈 내용을 만들 수 있게 해준다.
react-trasnition-group 은 Router간의 <Link>을 통한 페이지 전환시 애니메이션을 쉽게 넣을 수 있게 해준다.
recoil 은 리액트 전역에서 페이지간 prop상속 없이 사용할 수 있는 상태를 저장하여 접근할 수 있게 해준다.
(한 번에 설치할 수도 있다) ts적용 커멘드는 아래에 깃허브 페이지에 정리되어있다. 수많은 개발자들의 노고의 압도적 감사...
만일 본인이 원하는 인터페이스가 없다면 기여해보는 것도 좋을 거 같다.
GitHub - DefinitelyTyped/DefinitelyTyped: The repository for high quality TypeScript type definitions.
The repository for high quality TypeScript type definitions. - GitHub - DefinitelyTyped/DefinitelyTyped: The repository for high quality TypeScript type definitions.
github.com
4. index.tsx 작성
위에 다운받은 라이브러리를 적용시킨다. 이 과정이 끝나면 더이상 index.tsx를 건드릴 일은 없을 것이다.
(테마는 나중에 적용) 5. Router.tsx 생성
화면을 한 파일에 만드는 것이 아닌, 여러개의 파일로 분할한 후, 주소에 / 가 붙은 형태로 나타낼 것이기 때문에 Router.tsx를 이용해서 경로를 지정해준다.
6. App.tsx 작성
역시 다운받은 라이브러리를 적용시킨다. 이 때 css 초기화를 같이 해주는게 좋다. (css 초기화 검색하면 나올 것...)
css 초기화 파일을 styled-components에 createGlobalStyle 안에 적용하면 전역에서 css를 적용시킬 수 있다.
7. 테마 설정
테마 설정을 위해서 두 개의 파일을 만들어 줘야 한다.
하나는 테마 설정값이 들어있는 theme.ts
나머지 하나는 ts에게 타입을 정의해주는 인터페이스를 작성하기 위한 styled.d.ts
필요에 따라 여러 테마를 만들고 요소를 추가해주면 된다.
테마를 적용하는 방법은 styled-components 안에 ${props => props.theme.<key>} 로 접근할 수 있다.
초기화는 여기까지!
이후 추가하는 파일은 routes 폴더를 만들어서 추가하거나, 컴포넌트들은 components 폴더를 만들어 추가하면 깔끔히 정리하며 만들 수 있을 것이다.
'FW, Lib 공부 > React' 카테고리의 다른 글
useParams() (0) 2022.06.22 useQuery() (0) 2022.06.22 ts 타입 정리 (0) 2022.06.20 useEffect() (0) 2022.05.23 React 프로젝트 환경 세팅 (0) 2022.05.23