[프리온보딩 프론트엔드 챌린지 1월] 순수 함수 구현 및 코드 리팩토링

 

프리온보딩 챌린지 과제를 수행 할 때 순수 함수를 사용하려 최대한 고민하면서 진행 중이다.

 

 

[ 순수 함수 ]

 

순수 함수란 동일한 인자가 전달되면 항상 동일한 결과를 반환하는 함수이며, 부수 효과가 없어야 한다. 

 

여기서 말하는 함수의 부수 효과는 외부의 값을 바꿔서는 안되고, 외부에서 값이 변함으로 인해 함수가 영향을 받아서는 안된다.

완벽하게 이해가 되지 않아 이전에 진행 했던 프로젝트를 함께 보며 순수 함수에 대해 정리해보려 했다.

 

 

이전 프로젝트

 

내가 받아 들은 순수 함수는 이렇다. 함수가 외부의 값의 변화에 영향을 받아서는 안된다. 즉, checkedItems의 값이 변하면 해당 함수는 영향을 받게 된다. 

 

✏️ 오히려 함수 handleDelete의 매개 변수에 checkedItems를 전달받아 내부에서 작업을 하는 것이 좋을 것 같다라는 생각이 든다. 인수로 전달 받아 사용하면 동일한 인수만 준다면 해당 함수는 동일한 결과를 낼 것이다.

 

✏️ 또한 함수 handleDelete의 목적이 명확하지 않다. 추상화가 되지 않는 함수이다.. 일단 해당 함수가 뭘 지우는 함수인지도 함수명에서 파악하기 힘들고, 뭘 지운다는 것은 알겠는데 내부에서 가격도 계산하고, 서버와 통신도 하고 온만거 다하고 있다.😨

 

✏️ 하나의 기능에 충실하지 않기 때문에 당연히 함수 handleDelete는 재사용을 생각할 수도 없고 응집도 또한 떨어진다.

 

 

 

프로젝트 적용

 

 

너무 간단한 예시 같지만 나는 위와 같이 적용했다.

 

현재 프로젝트에서도 기존에는 함수 onClickCancel 내부에서 setToDoInput({ title : "" , content : "" })와 함수 onCloseModal 호출을 하고 있었다.

 

일단 함수가 하나의 기능만 하도록, 즉 함수 resetToDoInput은 input의 값만 초기화하도록,  함수 onClickCancle는 취소 버튼을 클릭했을 때 내부의 함수를 실핼만 시키도록 해주었다.

 

 

또한 input의 유효성 검사에 따라 true / false를 반환하는 함수는 내부에서 직접적으로 외부의 input값을 참조하는 것이 아닌 위와 같이 매개 변수에 전달 받아 유효성 검사를 진행하도록 해주었다.

 

✏️ 순수함수에 대해 제대로 이해하고 적용했는지 확신은 들지 않지만, 함수 사용을 이전보다 선언적으로 사용하고 있고, 한 번에 한 가지일과 해당 함수가 무슨 일을 하는 지 조금 더 명확하게 작성된 것 같다.

 

 

 

[ 코드 리팩토링 ]

 

이전 코드

 

 

유효성 검사를 제목과 내용 단 두가지를 5글자 이상만 입력하면 되도록 코드를 작성해서 내 눈에는 썩 💩 같지 않아보인다. 하지만 유효성 검사를 해야하는 입력값이 많아지면 위 보다 조금더 복잡해질 것 이다.

 

그 동안 유효성 검사는 무조건 조건문을 사용하여 진행했었지만 멘토님께서 유효성 검사를 해야하는 값이 많을 경우 every API나 some API를 사용하면 조금 더 깔끔한 코드 작성이 가능하다고 하셨다.

 

 

수정 코드

 

 

우선 굳이 한 번 밖에 사용하지 않아 객체 구조 분해를 하지 않았다. 앞서 언급한 some API를 사용하여 요소 중 하나라도 false가 있으면 false가 반환되게 해주었다.

 

❗️유효성 검사를 진행하는 값이 두 개뿐인데도 이렇게 깔끔해졌는데 로그인과 회원가입에 사용하면 효과가 한눈에 보일 것 같다.

 

 

 

🔥 아직까지는 함수를 선언형으로 사용하고, 한 번에 한 가지 일만 하고, 추상화가 잘되는 함수 작성이 쉽지만은 않지만 많은 생각을 하면서 함수 작성 및 사용을 해야겠다라는 생각이 든다.