new TIL. Westagramコードコメント

13112 ワード
React TIL テキストリンク
最初の項目は、Wistartramを行った後、正式なコードレビューを行いました.
メンバーと一緒に行ったPeerコメントとメンターコメントの主な事項を整理したいと思います.🤓

1.快速評価（短絡評価）


console.log(true && 'hello'); // hello
console.log(false && 'hello'); // false
console.log('hello' && 'bye'); // bye
console.log(null && 'hello'); // null
console.log(undefined && 'hello'); // undefined
console.log('' && 'hello'); // ''
console.log(0 && 'hello'); // 0
console.log(1 && 'hello'); // hello
console.log(1 && 1); // 1
A && B演算子を使用する場合、Aが真の値であればBは結果値、AがFalsy値であればAとなります.
逆に、A || B演算子を使用すると、Aが真の値である場合、Aが結果値であり、Aが偽の値である場合、結果はBとなる.

📌 コード再構築

const validation = this.state.loginId.includes("@") && this.state.loginPw.length > 4
...
<button onClick={validation && this.goToMain}>로그인</button>
ログイン時にidとpw入力条件を変数検証に含め、3つの演算子ではなくショートカットを使用してコードを変更し、truthyの検証時にホームページに切り替える関数を実行します.

2.非構造配分（destructuring assignment）


stateまたはpropsのデータ型はオブジェクトであるため、オブジェクトの非構造化割り当てを使用すると、重複コードの変更をより簡略化できます.
let options = {
  title: "Menu",
  width: 100,
  height: 200
};
alert(options.title);  // Menu
alert(options.width);  // 100
alert(options.height); // 200
上記のコードを用いた非構造化付与構文を以下に示す.
let options = {
  title: "Menu",
  width: 100,
  height: 200
};
// let {height, width, title} = { title: "Menu", height: 200, width: 100 }
let {title, width, height} = options;
alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

3. key


Keyは、Reactが変更、追加、または削除するアイテムを決定するのに役立ちます.keyは、安定した一意性を確保するために、アレイ内の領域に指定する必要があります.経験上、map()関数の内部にあるエンティティにキーを追加することをお勧めします.[ソースreactijs]

📌 コード再構築



最初は,Date.now()関数によってkeyとしてidを提供しようとしたが,そうするとkeyが固有値にならない可能性があるため,不適切なコメントを受けた.だからreact-uuidライブラリを使用しました.
const newComment = {
  comment : this.state.comment,
  id : uuid() 
};
...
{this.props.commentList.map(list => (
  <li key={list.id}> <b>im_just_twentyseven</b> {list.comment} </li>
))}
A UUID (Universal Unique Identifier) is a 128-bit number used to uniquely identify some object or entity on the Internet.

4.複数入力の処理

<input onChange={this.handleInput} name="loginId" className="inputBox" type="email" placeholder="전화번호, 사용자 이름 또는 이메일" />
<input onChange={this.handleInput} name="loginPw" className="inputBox" type="password" placeholder="비밀번호" />   
...
handleInput = (e) => {
        this.setState({
            [e.target.name] : e.target.value,
        })
    }
各inputの同じonChangeイベント関数を1つに減らすためにinput属性nameを与え、nameの値をstateと同じに設定します.
The name attribute specifies the name of an <input> element.
The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.
オブジェクトで[]を使用してkeyを囲む場合、その中に含まれるreprenceが指す実際の値がkey値として使用されます.[ソース反応スキル]

その他の事項

  • 컴포넌트 별로 scss 파일 생성하여 관리하기>同様にメンテナンスに有利です!
  • svg 파일 컴포넌트로 분리 
    import {ReactComponent as Home} from "./Svg/home.svg"
...
<Home />
  • 로직이 보다 복잡한 경우, 가독성을 위해 함수로 분리
    • 📌 今でもコリンの私にとって、コメントを修正するのはとても役に立ちますので、思う存分メッセージを残してください!📌
    [白俊]1475部屋番号(シルバー5)
    ポイントからフェースへ、Buttonのアトリビュートをアニメートするには