[TIL] 220121

📝 今日作った

react state

unit converter

array.filter(Boolean)

📚 学識
1. STATE
stateとは、データを格納する場所です.
バニラJSコードはcounterを追加し、UIに表示します.
この場合、変更されたデータ割り当てのカウンタ変数をstateに設定できます.
1)counter変数を更新してrender関数を呼び出す
まず、stateを無効にする方法について説明します.

カウンタ変数は、App関数の外で宣言されます.

counter変数をJSXに渡すには、その変数の名前を{}に記入するだけです.

counter変数を更新するためにcountUp関数を宣言し、ボタンにclickイベントを登録します.

最後に、UIに変更を反映するには、Appを再表示する必要があります.

const root = document.getElementById("root");
let counter = 0;
function countUp () {
  counter++; // 3. counter 값을 올리고
  render(); // 4. 바뀐 counter 값을 가지는 App 컴포넌트를 다시 render 한다
}
function render () {
  ReactDOM.render(<App />, root);
}
function App() {
  return (
    <div>
      <h3>Total Click: {counter}</h3>
      <button onClick={countUp}>클릭</button>
    </div>
  );
} // 2. 버튼을 클릭할 때마다 이벤트 리스너가 실행된다.
render(); // 1. 처음 App 컴포넌트를 render 하여 화면에 보여준다

ただし、この方法を使用すると、ReactDOMはデータが変更されるたびにデータを再レンダリングします.render()関数を呼び出す必要があります.
💡 React JSでの再レンダリング
バニラJSコードを使用すると、指定した要素全体が更新されます.
開発者ツールでspanを表示します.カウンタ変数だけでなく、「Total Click」テキストを含むspan要素全体の更新をinnerTextで確認できます.
逆にREACT JSではUIで変更された部分のみ更新できます.
開発者ツールでは、カウンタ変数の対応する部分のみが更新されることがわかります.React JS는 이전에 렌더링된 컴포넌트가 무엇인지를 확인하고, 다음에 렌더링될 컴포넌트는 무엇인지를 확인하여, 바뀐 부분만을 업데이트 해준다.つまり、CountUp関数でデータを変更して再レンダリングする場合、変更したデータはルートディレクトリに配置されますが、実際にはApp 컴포넌트 전부가 재생성に限定されます.
これにより、インタラクティブなアプリケーションの作成に役立ちます.
2) React.useState()の使用
React.useState()を使用して(render関数の呼び出しを続行する必要はありません)counter 변수만이 바뀔 뿐이다.およびReact JS 어플 내에 데이터를 보관を生成できます.

アプリケーションの応答JSアプリケーション.useState()を使用してcounter変数とsetCounter関数を宣言します.

counter変数をJSXに渡すには、その変数の名前を{}に記入するだけです.

counter変数を更新するには、ボタンにclickイベントを登録します.イベントリスナーではsetCounter関数を実行してcounter変数の値を変更しながら自動的に再レンダリングできます.

そのため、UIに変更を反映するためにReactDOMを使用します.render()関数を再呼び出す必要はありません.

const App = () => {
  const [counter, setCounter] = React.useState(0);
  const onClick = () => {
    setCounter(counter + 1);
  };
  return (
    <div>
      <h3>Total Click: {counter}</h3>
      <button onClick={onClick}>클릭</button>
   </div>
  );
};
const root = document.getElementById("root");
ReactDOM.render(<App />, root);

자동으로 리렌더링は配列を返し、パラメータはデータの初期値を渡すことができる.
counterはデータ、setCounterはデータを変更するための関数です.

const [counter, setCounter] = React.useState(0);

// 위와 아래는 같은 코드이다

const data = React.useState(0);
const counter = data[0];
const setCounter = data[1];

React.useState()のsetCounter関数としてcounter変数の値を変更すると、自動的に再レンダリングされます.

const OnClick = () => {
  setCounter(counter + 1);
};

// 위와 아래는 같은 코드이다

const OnClick = () => {
  counter++;
  ReactDOM.render(<Container />, root);
};

💡 React JSでの再レンダリング
(1)と同様に,UIで変更された部分のみ更新できる.React.useState()가 반환하는 배열의 두 번째 요소(App関数から戻る前にコンソールログを追加すると、クリックするたびにコンソールに値が出力されます.)
しかし、ここでは実際にはApp 컴포넌트의 state, 즉 어플리케이션의 데이터가 바뀌면 App 컴포넌트 전부를 재생성(리렌더링)한다.しかありません.
(開発者ツールのelementsタブを表示し、ボタンをクリックするたびにcounter変数部分だけが変化します.)
🔎 前のステップのstateを使用して次のステップのstateを置き換えます.
stateを設定するには2つの方法があります.
1つはstate値(ex.24579142)を直接入力し、もう1つは前のレベルのstateを使用して次のレベルのstateを変更します.(ex. counter 변수만이 바뀔 뿐이다. )

const onClick = () => {
  // setCounter(counter + 1);
  setCounter(current => current + 1);
};

前のステップのstateを使用してsetCounter(333)を実行し、次のステップのstateを変更します.
ただし、stateを他の場所で変更すると、予想とは異なる結果が生じる可能性があります.
逆に、setCounter(counter + 1)を実行したほうが安全です.
2.UNIT CONVERTERの作成(単位変換アプリケーション)
1)分を時間に変換
(1) htmlFor/className
forとclassはJavaScriptにも存在する予約言語であるため、JSXコードで使用する際にエラーが発生する.
逆に、JSX構文に従ってhtmlForとclassNameを使用する必要があります.
(2)react JSでformを扱う方法
react JSワールドで生成されたinputの値は直接制御できません.(uncontrolled input)
したがって、stateを作成してinputのvalue属性として渡す(react.usState()のパラメータを使用してデフォルト値を指定する必要があるため、警告は発生しません).ユーザーはinputに異なる値を入力するたびに、外部から値を取得するためにinputの値を更新する必要があります.({minute}を使用)setCounter(counter + 1)

const App = () => {
  const [minutes, setMinutes] = React.useState(0);
  const onChange = (event) => setMinutes(event.target.value);
  return (
    <div>
      <label htmlFor="minutes">Minutes</label>
      <input
        value={minutes}
        id="minutes"
        placeholder="Minutes"
        type="number"
        onChange={onChange}
      />
      <label htmlFor="hours">Hours</label>
      <input id="hours" placeholder="Hours" type="number" />
      <h4>minutes input의 value는 {minutes} 입니다</h4>
    </div>
  );
};
const root = document.getElementById("root");
ReactDOM.render(<App />, root);

onChange関数のconsole.イベントを実行すると、SyntheticBaseEventオブジェクトがコンソールウィンドウに出力されます.
targetはinputを表し、targetはvalueを表すnativeEventがあります.
コンソール.log(setCounter(current => current + 1))を実行すると、コンソールウィンドウはinput의 value를 state와 연결시킴으로써, input의 value를 외부에서도 수정할 수 있다.を出力します.
setMinutes関数を使用してminutesを更新し、Apppコンポーネントを再レンダリングする必要があります.
現在、minuteinputにユーザが値を入力すると、inputの値が変化し、h 4にリアルタイムに反映される.
💡 このとき、onChange={onChange}コードを削除すると、minuteinputでキーボード入力値をどのように押しても、inputウィンドウには0しか表示されません.
元の入力値{minute}のデフォルト値を0に設定します.
ユーザーがキーボードを押して値を変更するたびに、onChangeイベントリスナーは分値を変更します.
inputの値も変化し、App素子を再レンダリングします.
onChangeイベントリスナーが削除されているため、minutes値が0の場合は更新されません.
すなわちminuteinputの場合は①まずChange eventをリフレッシュし、②Change eventが発生したときにinputの値を更新してUIに表示する.
houseinputの場合、inputウィンドウを変更しないためにChange eventをリフレッシュしません.
(3)単位変換／リセットボタンの実現

const App = () => {
  const [minutes, setMinutes] = React.useState(0);
  const onChange = (event) => setMinutes(event.target.value);
  const onClick = () => setMinutes(0); // reset 버튼 클릭 시 minutes(input의 value) 초기화
  return (
    <div>
      <h1>Super Converter</h1>
      <div>
        <label htmlFor="minutes">Minutes</label>
        <input
          value={minutes}
          id="minutes"
          placeholder="Minutes"
          type="number"
          onChange={onChange}
        />
      </div>
      <div>
        <label htmlFor="hours">Hours</label>
        <input
          value={Math.round(minutes / 60)} // 단위 변환
          id="hours"
          placeholder="Hours"
          type="number"
        />
      </div>
      <button onClick={onClick}>Reset</button>
    </div>
  );
};
const root = document.getElementById("root");
ReactDOM.render(<App />, root);

2)時間を分に変換
(1)無効化機能のflipボタンを適用するか否かを判定する
デフォルトでは、時間inputへの適用は無効になり、minuteinputはenabled状態になります.
もう1つstateをして、flipボタンを押して、flip変数の値を反対にします.

const App () => {
  ...
  const [flipped, setFlipped] = React.useState(false); // 기본값 false
  const onFlip = () => setFlipped(current => !current); // flipped 변수 값 업데이트 & App 컴포넌트 리렌더링
  return (
    <div>
      <div>
        <label htmlFor="minutes">Minutes</label>
        <input
        id="minutes"
        ...
        disabled={flipped} // {flipped === true} 와 같다
        />
      </div>
      <div>
        <label htmlFor="hours">Hours</label>
        <input
        id="hours"
        ...
        disabled={!flipped} // {flipped === false} 와 같다
        />
      </div>
      ...
      <button onClick={onFlip}>{flipped ? "Turn back" : "Flip"}</button>
    </div>
  );
};

(2)時間入力でonChangeイベントを登録する
minutes inputに値を入力する場合は、hours inputに{Math.round(minute/60)}の値が表示されていることを確認し、hours inputに値を入力する場合は、時間inputに入力した値で表示します.
minuteinputの場合もそうです.
このため、event.target.valueを行うことができる.
コードの混同を避けるために、上記で宣言したminutesをamountに変更し、setminutesをamountに変更します.
しかし、このように書くと問題があります.
flipボタンをクリックすると、amount変数の値がアクティブ入力の値に割り当てられます.
この問題を解決するために、input의 valueをしました.

const onFlip = () => {
  setAmount(current => !current);
  reset();
};
...
<input
  value={!flipped ? amount : amount * 60}
  id="minutes"
  ...
  disabled={flipped}
/>
...
<input
  value={flipped ? amount : Math.round(amount / 60)}
  id="hours"
  ...
  disabled={!flipped}
/>

3. airbnb/javascript: JavaScript Style Guide
1) array.filter(Boolean)

const array = [1, "hi", null, ``, false];

const truthyCount = array.filter(Boolean).length;
// 위 아래는 같은 코드이다.
// Boolean()은 그 인자가 true일 땐 true를, false일 땐 false를 리턴하는 함수이다.
const truthyCount = array.filter((item) => Boolean(item)).length;

console.log(truthyCount); // 배열 [1, "hi"]의 길이는 2

明日作った

単位変換アプリケーション完了