Review|間違った答え

21713 ワード
テキストリンク

1.memo appコード

import "./MemoList.css";
import { useState } from "react";
import "./MemoList.css";

let dummyMemo = [
  { id: 1, priority: 1, content: "코딩하기" },
  { id: 2, priority: 0, content: "운동하기" },
  { id: 3, priority: 1, content: "기타 연습하기" },
  { id: 4, priority: 0, content: "등산하기" },
];

export default function MemoList() {
  const [memos, setMemos] = useState(dummyMemo);
  const [filter, setFilter] = useState(false);
  
  return (
    <div className="MemoListContainer">
      <div className="HeaderPart">
        <h1>MEMO</h1>
      </div>
      <div className="MemoPart">
        <div className="radioBox">
          <div>
            <input
              type="radio"
              name="filter"
              onClick={() => setFilter(false)}
             // *1. 
            ></input>
            전체 메모
          </div>
          <div>
            <input
              type="radio"
              name="filter"
              onClick={() => setFilter(true)}
            ></input>
            중요 메모
          </div>
        </div>
        <div className="memoBox">
          {memos
            .filter((memo) => {
              return (filter === true) ? memo.priority === 1 : true
              // if (filter === true) {
              //   return memo.priority === 1;
              // } else {
              //   return true;
              // } *2
            })
            .map((memo) => (
              <MemoListEntry {...memo} key={memo.id} />
            ))}
            // *3
        </div>
      </div>
    </div>
  );
}

function MemoListEntry(props) {
  const { id, priority, content } = props;
  // *4
  return (
    <div className="MemoListEntryContainer">
      <div className="infoPart">
        <div>{id}</div>
        <div>{priority === 1 ? "중요" : "일반"}</div>
      </div>
      <div className="contentPart">
        <div>{content}</div>
      </div>
    </div>
  );
}
  • 関数のみ定義され、定義されています.false値をパラメータとして変数更新関数に渡します.
  • if文を使用するよりも、3つの演算子を使用するとコードが簡単になります.
  • フィルタを用いて作製した配列にはmap法を直接用いた.既存の変数を利用するよりは良いようです.filter -> map
  • アイテムを構造分解配分として受け取った.
  • 配列の要素memoをpropsに渡すには、属性名を指定せずに展開演算子を使用します.

    • 2.

    let score = 80;
function doStuff(value) {
  value = 90;
}

doStuff(score) // score의 값은?
  • 元の資料型は、関数のパラメータで渡すと、値自体が渡され、変更できません.ということで、そのまま80になりました.
    • var a = 0;
function foo() {
    var b = 0;
    return function() {
        console.log(++a, ++b);
    };
}

var f1 = foo();
var f2 = foo();

f1(); // --> 1번
f1(); // --> 2번
f2(); // --> 3번
f2(); // --> 4번
  • aおよびbの値が関数の呼び出しに伴ってどのように変化するかは感じられない.
    • =>CloserとScoopの部分(koan sprint)を再学習すべきだと思います.

    2-1


    (Advanced)モジュールの有用な例:現在のステータスを覚え、最新の変更を維持します.
    <!DOCTYPE html>
<html>
<body>
  <button class="toggle">toggle</button>
  <div class="box" style="width: 100px; height: 100px; background: red;"></div>

  <script>
    var box = document.querySelector('.box');
    var toggleBtn = document.querySelector('.toggle');

    var toggle = (function () {
      var isShow = false;
      // TODO: ① 클로저를 반환하는 함수 작성
      return function () {
        // TODO: ③ isShow 변수의 상태를 변경하는 코드 작성
        // isShow ? box.classList.remove('hide') : box.classList.add('hide');
    box.setAttribute("class", isShow? "show" : "hidden")
        // CSS 내용은 생략.
    isShow = !isShow;
      };
    })();

    // ② 이벤트 프로퍼티에 클로저 할당
    toggleBtn.onclick = toggle;
  </script>
</body>
</html>
  • Closer関数を使用して、isShow変数の変更の最新値を格納します.
  • 当時は解けなかったが、今は解けた.空欄コードともいえる.Closer関数の利用を考えられますか?
    • 試験に出るAWS:SAAでしょう 第３夜
    Androidリクエストサーバは、返されたJSONデータをカプセル化し、数行のコードでJSONエンティティクラスの操作を得ることができます.