Expo Project 기본 세팅하기 (Prettier, ESLint, Styled-components, Recoil)Expo Project Default Settings (Prettier, ESLint, Styled-components, Recoil)
📅
🚀
들어가기 전에🔗
개발 환경은 Windows, Android Studio, Visual Studio Code를 사용했습니다. Expo 환경 프로젝트에서 개발을 위한 초기 설정을 해볼 것이다. 이 포스팅에서 설치 예정인 패키지는 다음과 같다.
- Prettier & Eslint: 코드 스타일을 통일하고, 코드 품질을 높이기 위해 사용한다.
- Styled-components: CSS-in-JS 라이브러리로, 컴포넌트 스타일링을 위해 사용한다.
- Recoil: 상태 관리 라이브러리로, 전역 상태를 관리하기 위해 사용한다.
🚀
Eslint & Prettier 설치🔗
✅
ESLint 설치🔗
Expo 프로젝트에서 다음 명령어를 통해 ESLint를 설치한다.
최초 실행 시
.eslintrc.js
파일이 생성되는데, 이 파일은 ESLint 설정 파일이다.
이후에 같은 명령어를 실행하면 lint 결과를 확인할 수 있다.npx expo lint👨💻
VS Code를 사용한다면, 추가적으로 ESLint 플러그인↗을 설치하는 것을 추천한다.Prettier과 함께 사용하기 위해
.eslintrc.js
파일을 수정한다.module.exports = {
extends: ['expo', 'prettier'],
plugins: ['prettier'],
rules: {
'prettier/prettier': 'error',
},
};또한 불필요한 파일을 무시하기 위해
.eslintignore
파일을 생성하고 다음 내용을 추가한다./.expo
node_modules✅
Prettier 설치🔗
프로젝트 폴더에서 다음 명령어를 통해 Prettier를 설치한다.
npx expo install -- --save-dev prettier eslint-config-prettier eslint-plugin-prettier👨💻
VS Code를 사용한다면, 추가적으로 Prettier 플러그인↗을 설치하는 것을 추천한다.Prettier 설정 파일을 생성하기 위해 프로젝트 폴더에
.prettierrc.js
파일을 생성하고 다음 내용을 추가한다.module.exports = {
singleQuote: true, // 문자열은 홑따옴표로
parser: "typescript", // 타입스크립트 사용
semi: true, // 세미콜론 사용
useTabs: false, // 탭 사용 금지
tabWidth: 2, // 들여쓰기 2칸
printWidth: 120, // 줄 바꿈 길이
arrowParens: "always", // 화살표 함수 괄호 사용
};Prettier가 적용되지 않도록 하는 파일을 설정하려면
.prettierignore
파일을 생성하고 다음 내용을 추가한다..md이제 파일을 저장하면 Prettier가 Eslint에 맞추어 자동으로 코드를 정리해준다.
🚀
Styled-components🔗
✅
Styled-components 설치🔗
Expo 프로젝트에서 styled-components를 사용하기 위한 방법은 React Native Cli 프로젝트와 동일하다.
styled-components를 설치하기 위해 다음 명령어를 실행한다.
npm i styled-componentsReact Native에서 styled-components를 사용하기 위해 추가적으로 타입 정의 파일을 설치한다.
npm i @types/styled-components @types/styled-components-react-native✅
Styled-components 사용 예시🔗
styled-components를 사용하기 위해 App.tsx 파일을 수정한다.
import React from 'react';
import { Text, View } from 'react-native';
import styled from 'styled-components/native';
export default function App() {
return (
<Container>
<Title>Hello, Expo!</Title>
</Container>
);
}
const Container = styled.View`
flex: 1;
justify-content: center;
align-items: center;
`;
const Title = styled.Text`
font-size: 24px;
font-weight: bold;
`;이제 styled-components를 사용할 수 있다.
🚀
Recoil🔗
✅
Recoil 설치🔗
Expo 프로젝트에서 Recoil을 사용하기 위해 다음 명령어를 실행한다.
npm i recoilRecoil을 사용하기 위해 RecoilRoot를 app/_layout.tsx 파일에 추가한다.
import React from 'react';
import { RecoilRoot } from 'recoil';
export default function App() {
return (
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
<RecoilRoot>
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="+not-found" />
</Stack>
</RecoilRoot>
</ThemeProvider>
);
}이제 Recoil을 사용해 전역 상태를 관리할 수 있다.
✅
Recoil 사용 예시🔗
먼저, Recoil을 사용하기 위해 atom을 생성한다.
import { atom } from 'recoil';
export const counterState = atom({
key: 'counterState', // 고유한 키
default: 0, // 초기값
});다음으로, Recoil을 사용해 컴포넌트에서 전역 상태를 사용한다.
기본적으로 Recoil은 useState와 유사하게 사용할 수 있다.
import React from 'react';
import { Text, Button } from 'react-native';
import { useRecoilState } from 'recoil';
import { counterState } from '../atoms/counter';
export default function Counter() {
const [counter, setCounter] = useRecoilState(counterState);
return (
<>
<Text>{counter}</Text>
<Button title="Increase" onPress={() => setCounter(counter + 1)} />
</>
);
}🚀
문제 발생 및 해결🔗
✅
VScode에서 ESLint: Delete `cr` 에러🔗
VScode에서 ESLint를 사용할 때, 위와 같은 에러가 발생한다.
이는 Windows에서 개행 문자를 줄바꿈 문자로 사용하는 것이 원인이다.
이를 해결하기 위해
.eslintrc.js
파일에 다음 내용을 수정한다.module.exports = {
extends: ['expo', 'prettier'],
plugins: ['prettier'],
rules: {
'prettier/prettier': ['error', { endOfLine: 'auto' }],
},
};🚀
결론🔗
Expo 프로젝트에서 Prettier, ESLint, Styled-components, Recoil을 설정하는 방법을 알아보았다.
이제 Expo 프로젝트에서 개발을 시작할 준비가 되었다.
✅