이것저것,

📢 지금 정리하는 글은 체계적으로 이론을 공부한 뒤 작성한 글이 아닙니다.
📢 클론코딩을 진행하며 남겨두어야 할 것 같다는 생각이 스치면 순서는 따지지 않고 일단 적고보는 글입니다👩‍💻

하나의 태그

class App extends Componenet {
  render() {
    return (
      // return시 하나의 최상위 태그에 감싸져있어야한다.
      <div className="App">
        Hello, React !!!
      </div>
    );
  }
}

JSX

• HTML + JavaScript
• 데이터 바인딩이 매우 쉽다는 장점을 가진다.

// camelCase로 작성해주어야한다.
// 변수에 담을 수도 있다.
// ** jsx로 css style 변경하기

<div style={{ color : blue }}>
  

State

• state는 변수와 비슷하다.
• 동적으로 받아올 정보. this.setState 로 상태를 변경해 줄 수 있다.
• 자주 바뀌는, 중요한 데이터는 state에 저장해준다.

state에 데이터를 담아주는 이유
-> state가 변경되면 HTML이 자동으로 재렌더링되는데,
이 때 state만 새로고침없이 다시 render 해준다.

// useState는 내장함수, 무조건 배열이다.
// 구조분해할당을 사용해 변수에 담는다. a는 "item", b는 state를 조작할 수 있는 함수.
let [a, b] = useState("item");

Deploy

새로고침 버튼 우클릭
Empty Cache Hard Reload

npm run start
개발자 도구의 Network탭을 확인하면 용량이 엄청 크다.
-> 개발의 편의성을 위해 create-react-app의 여러 기능들로 인해 용량이 무거운 것.

npm run build
production mode 로 앱을 build할 때는
npm run build 를 터미널에 입력하면 build라는 디렉토리가 생성.
불필요한 정보들이 걸러진 파일들이 생성된다.

npx serve -s build
npx serve -s build 를 터미널에 입력 후 줄어든 용량을 확인할 수 있다.
// build를 root documnet로 설정하여 실행하겠다.