자바스크립트 함수의 특징 with redux Thunk

Thunk는 특정 작업을 나중에 할 수 있도록 미루기 위해 함수 형태로 감싼 것을 의미한다.

 

리덕스에서 비동기처리를 위해 Redux Thunk를 공부하다가 Redux-Thunk의 핵심 함수인 다음과 같은 함수를 만났다.

 

 

 

이해가 잘 되지 않아서 차근차근 살펴보았다.

이해가 잘 되지 않아서 내 나름내로 아래와 같이 이해를 해봤다(문법적으로틀림)

const addOneThunk = x => return(const fn = ()=>addOne(x))

즉 const AddOneThunk = x=> return값  이라는 함수가 있을 때, 이 함수의 리턴 값으로 무기명함수(fn으로 표시함)이 들어있는것이다.

이를 문법에 맞게 표현하면 위와 같다.

 

그렇다면 이렇게 복잡한 함수를 왜 쓰는걸까?

결국 이는 콜백함수의 형태이고 콜백을 왜 쓸까와 동일 한 질문이다.

콜백을 왜쓰나? a라는 작업이 이루어 질때까지 기다린 후에 b라는 작업을 하고 싶을 때 쓰는게 콜백이다.

즉 비동기처리를 위해서 쓰는거라고 볼 수 있다.

redux-thunk가 비동기처리를 위한 거니 결국 기승전 비동기였던 것이다.

 

위의 코드를 하나씩 뜯어보다가 그럼 콜백을 안하면 비동기가 정말로 안되나?에 대해서 살펴보았다(이 과정에서 js기초 지식이 얼마나 부족한지를 꺠달았다.)

 

먼저 내가 의문이었던건 다음과 같다.

중요하게 봐야 할 곳은 addOneThunk함수와 addTwoThunk함수.

 

return을 thunk라는 함수를 만들어서 addOne(x)를 리턴하나,

바로 return을 addTwo(x)로하나 똑같은거 아닌가?라고 생각했었으나..

실행결과는 전혀 다르다.

하나는 함수 자체가 나오고 하나는 계산된 값이 나왔다.

 

나의생각: 결국 const thunk = ()=>addOne(x)을 하면 리턴값으로 addOne(x)이 나오니까(addOne(1)=2)2가 리턴값이 2가 되고 const thunk () => 리턴2
리턴2를 리턴하니까 2가 나와야 되는거 아닌가가 나의 생각이었으나..이게 아니다!

 

먼저 addOneThunk의 의 return으로 thunk라는 함수가 들어가 있다.

 

왜이럴까 검색하다보니 자바스크립트에서 함수는 값이라고 했던게 문득떠올라서 검색을 해봤다.

 

자바 스크립트에서 함수는 값이고, 함수 그 자체가 값으로 들어가는것도 당연히 가능하다.(나는 이를 계산된 값(결과값 2,3,4와 같은)만 들어가는거라고 생각했었으나 그게 아니다!! js에서 값이란건 계산된 값만을 의미하는게 아니다!!!)

 

이는 함수 선언문을 함수 표현식으로 바꾸면 명확히 들어난다.

function a(){}라는 함수 선언문으로 만들어진 a라는 함수는 결국

var a = function(){} 와 동일하다. a라는 변수에 함수가 들어가있다. 함수의 정의가 a라는 변수에 담겼으며 값으로 쓰이고 있음을 명확하게 보여준다.

 

addOneThunk(1)을 실행시킨다고 안에 있는 x파라메터로 1이 전달되서 addOne(1)을 실행시키는게 아니란말이다.

그냥 함수 그 자체가 들어가있는것이다. 그래서 이 함수를 실행시키려면 const fn = addOneThunk(1)와 같이 fn이라는 값에 다시 넣은다음에 fn()을 다시 한번 호출해줘야 그 안에 있는 함수가 제대로 실행이 된다.

 

addOneThunk(1)를 실행시킨 리턴값이 다시 함수가 나오므로 그 함수를 fn()에서 실행을 시켜주는 형식인것이다.

이해가 잘 안간다면

const fnn = addTwoThunk(1)에서 fnn()을 실행시키면 fnn()은 함수가 아니라고 나올 것이다. 왜냐하면 addTwoThunk(1)을 하는순간 함수가 나오는게 아니라 1이 대입되버린 값이 나와버리기 때문이다.

 

그럼 다시 원점으로 돌아와서 이렇게 fn()을 또 다시 호출시켜야지만 최종적으로 값이 나오게끔 왜 쓰는가?

바로 fn()을 호출하는 시점을 조절하여 함수의 호출시점을 조절하여 쓰고자 함이다(결국 기승전 비동기)

 

자바스크립트의 함수는 결국 값이고 이를 제대로 이해하고 있지 못했다는걸 이번에 다시한번 깨달았다. 

 

 

여기서 기초 다시 보기.

'js에서 함수는 값이다' 의 의미

 

밑을 요약하면 

즉 함수는 값=표현식을 실행한 결과 (표현식:표현식은 값을 산출하는 구문) (구문:자바스크립트에 내리는 명령)

함수는 값 이란 말을 풀면, 값을 산출하려고 자바스크립트에 내리는 명령을 실행한 결과가 함수란 말이 된다.

명령을 실행한 결과는 숫자일수도 함수일수도 객체일수도 어떤것도 가능하다!!

 

 

js에서 값의 정의는 다음과 같다.

값: 값은 표현식을 실행한 결과이다  

ex) 1, 30+10

표현식의 결과라고? 그럼 표현식은 뭐지?

 

표현식: 표현식이란 값을 산출하는 구문이다

ex)1, 30+10,'Hello', hello() (hello는 어딘가에 이미 선언되어 있는 함수라 가정)

대충보면 뭐야 값이나 표현식이나 똑같은거 아니야? 라고 생각할 수 있지만 다르다.

값은 표현식을 '실행'한 결과이다. 이러한 실행을 거친 값이 메모리에 할당 된다. 즉 1을 출력한다면 우리가 보기에는 그냥 1이지만 js에서는 숫자 리터럴을 통해 작성된 표현식을 js엔진이 실행하고 우리가 볼 수 있게 출력해주는 것이다.

 

리터럴이란 들어는 봤지만 뭔지 정확히는 모르겠는 단어가 또 나왔다.

리터럴: 리터럴은 값을 표기하는 약속된 기호, 문자, 방법이다. 즉 컴퓨터가 이해할수있도록 컴퓨터와의 커뮤니케이션의 방식을 특정 해 놓은 규칙이다. 만약 내가 함수(){}를 함수라고 주장해도 컴퓨터는 이를 함수라고 인지하지 못한다. 함수 리터럴이 아니기 때문이다.

 ex)

1  //숫자리터럴

'heel'  //문자리터럴

 [1,2,3]  //배열리터럴

{age:20, sex: 'female'}  //객체리터럴

 function(){}, var a = fuction(){}, const a = ()=>{} //등등 전부 다 함수리터럴

 

마지막으로 구문이다. 구문은 프로그램을 구성하는 기본단위이다. 리터럴을 사용해 표현식을 작성하고 값을 처리하기도 하는 명령문을 말한다.

값이란 표현식의 결과이며, 표현식은 값을 산출하는 구문이다. 리터럴을 값을 표기하는 일종의 규칙이며 구문은 자바스크립트에 내리는 명령이다

 

자 여기까지 본 뒤에 다시 보자.

 

 

 

 

 

 

 

참고

https://webclub.tistory.com/114