들어가면서
슬슬 데이터를 다루다 보니 셀 수 없는 수의 함수가 만들어지고 있다
진짜 미친듯이 늘어나고 있는데(현업에서는 더 많지 않을까?)
그러다 보니 그 함수를 최대한 줄이고자 하는데
내 능력껏 줄였다면 그 함수를 또 팀원들에게 이해를 시켜주어야 한다
만약 내 설명 실력이 좋고, 마침 팀원들이 잘 이해했고, 좋은 방법이라는 결론이 나면!
그 함수를 팀원 모두와 사용하게 된다!
하지만 그렇지 못하다면?
힘들게 만든 함수는 기각..
그래서 항상 많이 아는 것보다는 그렇게 복잡하지 않으면서
짧고 굵게 잘 만든 함수가 정말 좋은 것이란걸 깨닫게 된다
(하지만 나는 아는 것이 거의 없기 때문에, 무조건 지금은 많이 아는 것이 낫다..)
복잡한 함수를 요리조리 줄이다 보니 나타나게 된 개념인 콜백함수!
한번 알아보자
콜백 함수가 무엇일까?
직관적으로 보면
콜백(부재중 기록에 다시 전화를 거는)을 하는 함수
즉 전화를 다시 걸어주는 함수?!
함수 안에 함수가 들어간 형태라고 생각하면 쉬울 것 같다!
값을 받아 일정 처리(첫번째 작업)가 이루어지면
후속 처리(두번째 작업)를 하는 식의 구성이 필요할 때 쓰는 것
예시를 들어보면서 조금 더 자세히 보자
콜백함수가 필요한 이유(예시)
우리가 어떤 수를 받아서
짝수인지 홀수인지를 판별해서
짝수라면 10을 곱하고 홀수라면 3을 곱한 결과값을 콘솔창에 띄운다!
이 내용을 코드로 만들어보면!
const func = (number) => {
if (number % 2 === 0) {
number *= 10;
} else {
number *= 3;
}
console.log(number)
}
func(7) // 21이부분을 조금 더 자세하게 파트를 나눠보자면!
const evenOddDivider = (number) => {
if (number % 2 === 0) {
number *= 10;
} else {
number *= 3;
}
printer(number)
}
const printer = (str) => {
console.log(str)
}
evenOddDivider(7) // 21자 이 코드를 콜백함수를 사용한 형태로 바꾸면
const evenOddDivider = (number, callback) => {
if (number % 2 === 0) {
number *= 10;
} else {
number *= 3;
}
callback(number)
}
const printer = (str) => {
console.log(str)
}
evenOddDivider(7, printer) // 21콜백함수가 필요한 이유(설명)
예시 자체는 아주 쉬운 형태로 주었지만 실제 상황에서는 더 복잡해진다
만약 프론트와 통신을 하게 된다면
- 정확한 URI를 통해서 작업을 요청했는지
- 해당 작업에 필요한 값을 올바르게 주었는지
- 그 값을 데이터베이스 통신 전에 알맞은 값으로 변형
- 변형된 값에 적합하는 데이터를 데이터베이스에서 찾거나 입력
과 같은 단계로 이어질 것인데
여기서 필요한 함수를 한꺼번에 쓰기보다는
단계별로 나누어 적는 것이 좋을테고
반복 사용되는 함수는 한번만 작성 후 호출(같은 파일)해서 쓰는게 좋을테고
나름의 규칙이 확실히 잡혀있다면 그 함수는 다른 파일에 옮기고
파일 간 호출을 통해서 쓰면 점점 더 깔끔한 형태의 코드를 만들 수 있는 것!
이런 필요성과 자바스크립트의 엄청난 자유도 덕분에
변수에 함수도 담을 수 있어 콜백함수를 쓰게되는 상황까지 온 것 이다
(하지만 이때문에 엄청난 오류가 생겨 타입스크립트를 배워야 할 날이 올 것이라는데..)
이렇게 세세하게 구별해두면 특정 기능이 바뀌었을 때
어떤 코드 전체를 바꾸는 것이 아니라 콜백함수로서 사용되는
특정 함수만 바꾸면 되고 그 함수가 호출 되는 모든 부분에서
일일이 수정해 줄 필요가 없으니 관리면에서도 좋다!(함수가 유연해진다)
그렇다면
콜백함수는 무조건 좋은건가?
그렇지만은 않다
콜백함수의 한계
콜백지옥
여러 함수를 엮어서 쓰다보면
func1((data1)=>{
func2((data2)=>{
func3((data3)=>{
func4((data4)=>{
func5((data5)=>{
func6((data6)=>{
func7((data7)=>{
func8((data8)=>{})
// data8을 이용한 작업
})
})
})
})
})
})
})이렇게 위와 같이 엄청난 천국의 계단이 생긴다..
(주로 프론트에서 발생한다고 한다.. 그렇다고 썩 안심되지는 않지만..)
가독성과 가변성을 위해 사용한 콜백함수가
다시 가독성을 떨어트리는 일이 생긴다..
비동기처리
자바스크립트는 비동기처리에 특화된 프로그래밍 언어 중 하나인데
이 때문에 콜백함수가 채 연산을 마치기 전에
다음 함수(코드 작성 기준 아랫줄의 함수)가 실행되는 경우가 생긴다!
그럼 이후 콜백함수에 넘길 값이 없기 때문에 오류가 생겨버린다!
마무리???
콜백함수를 사용함으로써 반복되는 함수를 줄이고
심지어 따로 격리를 시켜 더 깔끔하게 만들 수 있고
한개의 함수 안에 다른 함수를 배치시켜서 쓰기 때문에
기능 변경 시 수정과 해당 함수의 유연성이 높아졌다!
+++
하지만 콜백지옥이나 언어의 특성인 비동기 처리에서
그 한계점에 봉착하게 되는데.. 이부분에 대해선 다음 포스팅에서 알아보자!
++
발돋움 중인 예비 개발자 입니다.
태클 및 의견 공유 언제나 환영 :D
