あれやこれや.


📢 現在整理されている文章は理論を系統的に学習した後に書かれた文章ではない.
📢 これは先に書いてから読む文章です.👩‍💻

1つのラベル

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

  • 状態は変数に似ています.
  • は、情報を動的に受信する.ステータスをthis.setStateに変更できます.
  • で頻繁に変更される重要なデータはstateに格納されます.
  • なぜstateにデータを書き込むのですか?
    ->ステータスが変更されると、HTMLは自動的に再表示されます.
    この場合、stateのみがリフレッシュされず、再表示されます.
    
    // useState는 내장함수, 무조건 배열이다.
    // 구조분해할당을 사용해 변수에 담는다. a는 "item", b는 state를 조작할 수 있는 함수.
    let [a, b] = useState("item");

    Deploy



    「≪リフレッシュ|Refresh|Hfm≫」ボタン右クリック
    Empty Cache Hard Reload
    npm run start
    開発者ツールのネットワークラベルを表示すると、その容量が非常に大きいことがわかります.
    ->create-react-appの各種機能により容量が重く開発が容易である.
    npm run build
    プロダクションモードでアプリケーションを構築する場合、npm run buildを端末に入力すると、buildというディレクトリが作成されます.
    不要な情報をフィルタリングしたファイルが生成されます.
    npx serve -s build
    端末にnpx serve -s buildを入力すると、容量の減少が確認できます.// build를 root documnet로 설정하여 실행하겠다.