TIL )함수 재사용

코드를 깔끔하게 작성하기 위해서는 많은 방법이 있다.
혼자서 코드를 작성할때는 가독성보다는 구현이 되는지 안되는지에 비중을 높게 두었지만 팀프로젝트를 하게되면서 가독성에 많은 노력이 필요하다는 것을 느끼게 되었다. 코드를 깔끔하게 작성하면 기업측면에서도 많은 도움이 되는데 가독성이 높은 코드는 새로운 팀원과 신입들이 코드를 이해하는데 드는 시간+비용을 절약할수 있다.
오늘은 함수 재사용으로 코드사용을 줄이는 것에 대해서 정리해본다.

DRY(Don't Repeat Yourself)

중복코드를 줄이는 것이다.
fetch함수를 사용하게 되면 fetch함수를 무분별하게 많이 사용하게 되는데
fetch API 주소를 와이파이가 바뀌면 경로를 일일이 수정해 주어야 한다.
하지만 변수로 선언해서 사용하면 한번에 수정이 가능하며 로직의 관리포인트가 줄어든다.

예시로 fetch('http://localhost:8000') 이런형식으로 작성하는 것을
fetch(${API}/product/1} 이런식으로 사용하면서 변수하나만 변경해 주는 것이다.

KISS (Keep It Simple,Stupid)

단순하게 코드를 사용해야 한다. 코드가 복잡하고 어려우면 재사용하기 어려워진다.
함수를 작성할때 함수 이름을 짓기 어려울 경우 함수에 너무 많은 기능을 넣지 않았나 생각해보아야 한다. 1함수 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 });
};

반복되는 부분을 하나로 만들어 주고 키를 배열에 넣어주면 계산된 속성명을 사용할수 있다. 위는 구조할당을 한것이데 기존의 코드를 보면 이런식이다.

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

이런식으로 변동되는 키값을 이렇게 적용할수 있다.

2. 함수 기본 매개변수

함수에 기본 디폴트 값을 정해줄수 있다.

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

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

위처럼 작성하고 함수를 실행하게되면 기본값으로 안녕하세요가되고
함수 인자에 값을 넣으면 넣은 값이 나온다.

테크닉이니 외워두기로 한다.

또한 키값과 키가 같을때 줄여쓰기가 가능하다
phoneNumber:phoneNumber
=> phonNumber