[React] 입문 - 실습 준비하기

실습 준비하기

npm create vite@latest → 파일 명 입력 → React → JavaScript 

npm i → npm run dev → 로컬 호스트 주소 들어가기

 

불필요한 파일을 삭제해보자! 

public 폴더 - vite.svg 삭제

src 폴더 - assets 폴더 - react.svg 삭제

 

App.jsx 파일 수정

import './App.css';

function App() {
  return (
    <>
      <div>
        <h1>Welcome to React</h1>
      </div>
    </>
  );
}

export default App;

App.css, index.css 작성된 스타일들 모두 삭제

 

main.jsx 파일 수정

import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(<App />);

 

.eslintrc.cjs 파일 수정 - 맨 마지막 두줄 보기

import js from '@eslint/js';
import globals from 'globals';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';

export default [
  { ignores: ['dist'] },
  {
    files: ['**/*.{js,jsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
      },
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...js.configs.recommended.rules,
      ...reactHooks.configs.recommended.rules,
      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      'no-unused-vars': ['off', { varsIgnorePattern: '^[A-Z_]' }],
      'react/prop-types': 'off',
    },
  },
];

no-unused-vars - 실제로 사용하지 않는 변수가 있을때 오류가 발생하면 혼란스럽기때문에 off해준다. 

react/prop-types - 나중에 리액트를 배우고 나서 좀 더 안전하게 사용할 수 있도록 해주는 옵션인데 일단 off해준다.