TIL)関数再利用

コードをきれいに書く方法はたくさんあります.
一人でコードを書くときは、可読性よりも実現できるかどうかを重視しますが、チームプロジェクトの展開に伴い、可読性には大きな努力が必要であることに気づきました.簡潔なコードは企業にも役立ちますが、可読性の高いコードは、新しいチームと新しいメンバーがコードを理解するのに要する時間とコストを節約します.
今日では,関数再利用削減コードの使用についてまとめる.

DRY(Don't Repeat Yourself)

重複コードを減らす.
fetch関数を使用すると、fetch関数の使用頻度が高くなります.
wifiがfetch APIアドレスを変更する場合は、パスを1つずつ変更する必要があります.
ただし、変数として使用すると宣言した場合、一度に変更して論理の管理ポイントを減らすことができます.
例えばfetch('http://localhost:8000'')
fetch(${API}/product/1}このように使用すると、1つの変数しか変更されません.

KISS (Keep It Simple,Stupid)

コードは簡単に使うべきです.コードが複雑で使いにくい場合は、再利用しにくいです.
関数を記述する際に関数の名前を付けるのが難しい場合は、関数に多くの機能が加わっているかどうかを考慮する必要があります.1関数1機能
関数を再利用するためには、簡単に作るべきですが、難しい場合は、次の手順を試してみてください.

関数再利用テクニック

区分

可変部分
まず,細分化過程で繰り返される部分がどこにあるか,動的に変化する部分が関数として用いられるか,変数として用いられるかを見てみよう.

console.log("안녕하세요, " + "위코더" + "!");

2.変数化可能な部分を関数のパラメータにしようとする
様々な動的変化が必要な場合は、関数のパラメータとして受け入れて変更できるので、関数として作成してみます.

function sayHello(person) {
	console.log("안녕하세요, " + person + "!");
}

sayHello("위코더");

3.パラメータ数を増やす
すなわち,因子を増やすと,様々な条件に反応する.

function saySomething(message, person) {
	console.log(message + ", " + person + "!");
}

saySomething("안녕하세요", "위코더");
saySomething("안녕히가세요", "위코더");

このような手順で行い,因子が異なるタイプに対応できるように変更して発展すればよい.

役に立つテクニックがわかった

1.オブジェクト計算の属性名

プロジェクトを行う場合、異なるstate値が使用されます.
下と同じです.

handleId = (e) => {
  this.setState({ id: e.target.value });
};

handleName = (e) => {
  this.setState({ name: e.target.value });
};

handleEmail = (e) => {
  this.setState({ email: e.target.value });
};

handleAddress = (e) => {
  this.setState({ address: e.target.value });
};

しかし単にキーを変更しただけで、残りは繰り返し使用します.

const handleInput = (e) => {
  const { name, value } = e.target;

	// 객체 계산된 속성명
  this.setState({ [name]: value });
};

重複する部分を1つにし、配列にキーを入れると、計算されたプロパティ名を使用できます.上は構造割り当てを行い,既存のコードから見るとそうである.

const handleInput = (e) =>{
this.setState({[e.target.name]:e.target.value}) 

このように変化するキー値を適用することができる.

2.関数の基本パラメータ

関数のデフォルトのデバッガ値を指定できます.

const sayHello = (message = "안녕하세요!") => {
	return message
}

sayHello() // "안녕하세요!"
sayHello("안녕히 가세요!") // "안녕히 가세요!"

上の図に示すように、関数を作成して実行する場合は、デフォルトは「こんにちは」です.
関数パラメータに値を追加すると、値が得られます.
テクニックなので、メモすることにしました.
また、キー値とキー値を同時にインデントすることもできる
phoneNumber:phoneNumber
=> phonNumber