서론

하위 컴포넌트의 상태를 관리하기 위해 상위 컴포넌트로 이벤트를 전달할 때, 콜백을 사용하는 경우를 구현했다. 콜백이 함수전달 방식이다.
코드는 아래와 같다. CloseButton을 누를 경우 뷰를 안보이게 처리하는 걸 CloseButton의 상위 컴포넌트인 ViewMaker에서 진행한다.

interface closeButtonProps {
  onCloseClick: () => void
}

export const CloseButton = ({onCloseClick}: closeButtonProps) => {
  return (
    <TouchableOpacity onPress={() => {onCloseClick()}}>
    <Text>close</Text>
    </TouchableOpacity>
  )
}

function closeView() {
    /**어쩌구 저쩌구 뷰를 닫는 코드**/
  }

export const ViewMaker = () => {
  let newArray = state.valueArray.map((item, idx) => {
    return (
      <Animated.View
        key={idx}
        style={{opacity: animatedValue, transform: [{translateY: animationValue}]}}>
        <CloseButton onCloseClick={closeView} />
      </Animated.View>
    )
  })
}

본론

콜백함수를 사용할 때 혼동되었던 문법이 바로 함수 전달과 함수 호출이다.
하지만 힙과 스택 측면에서 자세히 살펴보면 완전 다르다.

1.함수 전달

보통의 콜백 방식이 함수 전달방식이다. 함수 closeView의 참조가 onCloseClick 프로퍼티에 전달된다. 전달받은 참조값을 의도한 시점에 사용해서 콜백함수를 호출해 사용하는 것이다.

function closeView() {
    /**어쩌구 저쩌구 뷰를 닫는 코드**/
	
  }

export const ViewMaker = () => {
    return (
        <CloseButton onCloseClick={closeView} />
    )
}

그림

1.함수 closeView는 객체이므로 javascript heap에 할당된다. 그리고 이 객체의 참조값이 콜 스택에 저장이 된다.

2. CloseButton을 누른 이벤트로 인하여 onCloseClick 프로퍼티가 가진 closeView의 참조값을 이용해 함수 closeView를 실행하면, 함수 closeView의 Scope가 생성되고 함수 내에서 사용하는 변수도 저장된다.
   

3.closeView 함수의 실행이 끝나면, 스코프가 해제된다. 하지만 1번 그림에서 본 closeView는 여전히 힙에 남아있을 수 있고, 함수 closeView가 종료되더라도 콜백 함수에서 사용할 수 있는 상태를 유지하게 된다.

2.함수 호출 전달

반면 함수 호출 전달 방식은 함수를 먼저 호출하고 반환된 값을 전달한다.

function closeView() {
    /**어쩌구 저쩌구 뷰를 닫는 코드**/
  }

export const ViewMaker = () => {
    return (
        <CloseButton onCloseClick={closeView()} />
    )
}

그림

1.함수 closeView가 호출되었으므로 콜 스택에 함수의 실행 컨텍스트가 쌓인다.

2.함수가 실행되기 때문에 스코프도 생성된다.

3. 그리고 이 함수 closeView의 반환값이 없기 때문에 undefined를 onCloseClick 프로퍼티로 넘기게 된다. 참고로 반환값은 호출된 위치에서 받아서 사용된다. 내가 사용한 예제코드에서는 onCloseClick 프로퍼티의 타입과 일치하지 않아 타입 오류를 뱉게 된다.

참고자료

https://charming-kyu.tistory.com/19
https://velog.io/@won11/JS-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC%EC%BD%9C-%EC%8A%A4%ED%83%9D-%EC%BD%9C%EB%B0%B1-%ED%81%90-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84
https://velog.io/@won11/JS-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC%EC%BD%9C-%EC%8A%A4%ED%83%9D-%EC%BD%9C%EB%B0%B1-%ED%81%90-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84