리액트 플러그인 설치 props와 스니펫 사용법

react를 import 없이 쓰기

@vitejs/plugin-react 를 설치한 후 vite.config.js에 설정해준다.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

하지만 위의 문법은 cjs에서 지원종료 되었기 때문에 package.json에서 type:module로 바꿔줘야 함, 이 경우 eslintrc, prettierrc 는 export.default=구문이 cjs이기 때문에 파일 확장자를 cjs로 바꿔줘야 함.(node에게 알려주기 위해)

이럴 경우, 전 페이지에서 eslint 가 import react에 대해 오류로 선언하는데 이것을 방지하기 위해 eslint의 extends에 plugin:react/jsx-runtime를 추가해준다.

props 사용 법

import Widget from '../components/Widget/Widget';
import Button from '../components/Button/Button';
import './App.css';
function App() {
  return (
    <div className="app">
      <Widget
        type="partly-cloudy"
        temperature={-0.9}
        summary="어제보다 1.3° 낮아요"
        location="Seoul"

  		</Widget>
    </div>
  );
}
export default App;

여기서 widget에 들어간 속성들이 props가 된다. function Widget()이 위치한 jsx에서 console.log(props)를 호출할 시 객체로 된 배열이 나오는데, 0번에 속성(key)과 값(value)로 된 객체가 들어있음.
이걸 Widget 컴포넌트 함수 내에서 props.key값으로 호출해 넣어줄 수 있다.

Strict Mode

import {StrictMode} from 'react';
//React -functional Programming
// Component === pure Function, side Effets 작성한 함수가 순수하게 작성되었는지 판단해줌. 
//쓰기 위해서는 import로 StrictMode를 react에서 가져와야함
// StrictMode (twice render)
root.render(
	<StrictMode>
    	<App/>
    </StrictMode>
);

추가로 알게 된 것

export default const FormControl = () => {
  // 이건 오류임. 왜냐하면 const로 정의된 함수 앞에는 바로 export default가 올 수 없음
  return (
    <div className="formControl">
      <label>
        사용자 이름
        <input type="text" name="username" />
      </label>
    </div>
  );
}

const FormControl = () => (
  <div className="formControl">
    <label>
      사용자 이름 <input type="text" name="username" />
    </label>
  </div>
);

export default FormControl;
//아래쪽에 따로 export default를 선언해줘야 함

CJS = Common JS(es5라서 import, export 쓸 수 없음)
ESM = Echma Script Module (이게 있으면 es6를 쓰고 module 환경임)

렌더링 에러: 보통 렌더링 명령은 main.jsx에 두고 하지만, 현재는 main이 아닌 app이 들어있는 폴더에서 계속 렌더링을 하기 때문에 새로 저장할 때마다 렌더링이 반복 돼서 이런 경고가 뜸

스니펫 세팅하는 방법

스니펫 제너레이터
스니펫 config에서 설정함.
java, javaScript, htiml 등 어떤 환경에서 작동시킬 지 결정 후 안에다가 복사 붙여넣기 함.
global로 설정 시 범위 설정도 할 수 있음

원자, 분자, 조직 단위의 컴포넌트

원자는 더 이상 쪼개지지 않는 상태: button, a, label, input 등등
분자는 이런 원자가 모임: label과 input button이 들어간 form 등
조직은 이런 분자가 모임: header, main, section 등