[React.js] 실습 준비하기

 

1.  새로운 리액트 앱 생성

npm create vite@latest section05 react 선택 javescript 선택

 

 

2. 폴더열기

파일 - 폴더열기 - 금방 만든 section05파일 열기 

 

3. dependencies 다운로드

npm install

 

4. 리액트 실행

npm run dev

 

5. 불필요한 파일 삭제 

 

1. /src/App.jsx에서 상단 svg 파일 사용 하지 않기 때문에 파일, impor문 모두 삭제

하나는 퍼블릭, 하나는 에셋 폴더에 들어가 있다.

 

2. useState 삭제 

import { useState } from 'react'

const [count, setCount] = useState(0) 

 

3. App()을 리턴하고 있는 Div 모두 삭제 후 리턴문 수정

<div>

<a href="https://vite.dev" target="_blank">

<img src={viteLogo} className="logo" alt="Vite logo" />

</a>

<a href="https://react.dev" target="_blank">

<img src={reactLogo} className="logo react" alt="React logo" />

</a>

</div>

<h1>Vite + React</h1>

<div className="card">

<button onClick={() => setCount((count) => count + 1)}>

count is {count}

</button>

<p>

Edit <code>src/App.jsx</code> and save to test HMR

</p>

</div>

<p className="read-the-docs">

Click on the Vite and React logos to learn more

</p>

 

function App() {

return (

<>

<h1> 안녕 리액트 </h1>

</>

)

}

 

4. css파일 정리

App.css, index.css 파일 내용 모두 삭제

 

5. main.jsx 에서 <StrictMode> 태그 삭제

 

5. 도구 설치

 

1. eslint 설치 : 코드를 정적으로 검사해서 오류가 날만한 코드를 알려줌 

 

 

2. 설치 후 탐색기로 다시 돌아와서 eslintrc.cjs 파일에 들어간다. 나는 eslintrc.cjs 파일이 없고 eslint.config.js파일 밖에 생성이 되지 않았는데 두개는 같은거라고 한다 (아래 인프런 답변 참조)

https://www.inflearn.com/community/questions/1353483/%EA%B0%95%EC%9D%98%EC%9D%98-eslintrc%EC%99%80-eslint-config%EC%9D%98-%EC%B0%A8%EC%9D%B4%EA%B0%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94

 

3. eslint.config.js 룰 추가

rules: {

...js.configs.recommended.rules,

...react.configs.recommended.rules,

...react.configs['jsx-runtime'].rules,

...reactHooks.configs.recommended.rules,

'react/jsx-no-target-blank': 'off',

'react-refresh/only-export-components': [

'warn',

{ allowConstantExport: true },

],

"no-unused-vars":"off",

"react/prop-types":"off",

},

      "no-unused-vars":"off", --> 코드 상 실제로 사용하지 않는 변수를 오류로 알려주는 것을 끔 
      "react/prop-types":"off", --> 리액트를 다 배운 후 켤 예정