Initial Expo Setup: Prettier, ESLint, Styled-components, and Recoil

npx expo lint

module.exports = {
  extends: ['expo', 'prettier'],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',
  },
};

/.expo
node_modules

npx expo install -- --save-dev prettier eslint-config-prettier eslint-plugin-prettier

module.exports = {
  singleQuote: true,  // 문자열은 홑따옴표로
  parser: "typescript", // 타입스크립트 사용
  semi: true,         // 세미콜론 사용
  useTabs: false,    // 탭 사용 금지
  tabWidth: 2,    // 들여쓰기 2칸
  printWidth: 120,  // 줄 바꿈 길이
  arrowParens: "always",  // 화살표 함수 괄호 사용
};

.md

npm i styled-components

npm i @types/styled-components @types/styled-components-react-native

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;
`;

npm i recoil

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>
  );
}

import { atom } from 'recoil';
 
export const counterState = atom({
  key: 'counterState',  // 고유한 키
  default: 0, // 초기값
});

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)} />
    </>
  );
}

module.exports = {
  extends: ['expo', 'prettier'],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': ['error', { endOfLine: 'auto' }],
  },
};