리액트 입문 상

Vite

CRA 로 강의 내용이 진행되었지만
기술매니저님이 vite가 더 빠르다고 vite로 하기를 추천해주셨다.
찾아보니 Vite가 CRA보다 100배(대충 표현이) 빠르다 하네
메모메모
CRA와 크게 다른 건 없지만 일단 처음 프로젝트 생성할 때

yarn create vite vite-app week-1  # 프로젝트 생성

이 명령어로 생성해야하고

yarn dev  # 프로젝트 시작

시작할 땐 start 대신 dev 라는 것? 등등이 있다.

절대경로 지정

다른 하위 폴더말고 그냥 root경로에 jsconfig.json 파일을 만들고

{
	"compilerOptions": {
		"baseUrl": "src"
	},
	"include": ["src"]
}

이렇게 내용을 작성하면 import ~ from ./파일명 같은
상대경로 대신 그냥 파일명만 써서 절대경로로 편하게 사용 가능!

---

JSX(JavaScript + XML)

JavaScript를 확장한 문법
HTML을 품은 JS ⇒ JSX

JSX에서 쓰는 < div >는 DOM 요소라기 보다는 정확히는 React 요소인데
이건 가상돔(Virtual DOM)을 배워야 알 수 있기 때문에
지금은 리액트 돔을 구성하는 건 리액트 요소!
돔을 구성하는 건 돔 요소! 라고만 기억하기

*컴포넌트에서 반환 할 수 있는 엘리먼트는 1개!!

return할 부분에는 태그를 무조건 하나로 묶어주기

function App() {
	return (
    <> // 이렇게 빈 태그로도 가능
    	<p>안녕하세요! 리액트 화이팅 :)</p>

    	<div className="App">
      	<input type='text'/>
    	</div>
    </>
  );
}

그리고 html과 비슷하지만 다르게
JSX로 작성하는 태그 내에서 클래스 명을 정해줄 땐

속성 값을 className으로 사용

하지만 id는 그냥 id로 쓴다.

<div className="App">

인라인으로 style 적용

// 객체도 자바스크립트이기 때문에 중괄호가 두개
// 이렇게 쓸 수도 있고
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 객체를 변수로 만들어서 사용 가능!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}