아래는 클로저를 실무에 직접 사용하여 적용한 예제이다.

실제 코드는 아래와 같이 변경하여 소개하도록 한다.

리액트에 적용하였고, 리액트 컴포넌트의 밖/외부 모듈에 아래와 같은 클로저를 삽입하고

유저가 채팅방 메세지를 신고하면 report 상태를 true로 업데이트하여 이미 신고가 진행된 내역에 대해서는 추가로 서버에 요청을 보내지 않도록 하기 위함이다.

// 컴포넌트 외부에 선언한 closure

// prevent user from reporting multiple chat messages

const hasUserReportChatRoomAlready = () => {

              reportStatus = !reportStatus;

// 사용하고 싶은 컴포넌트 내부에 선언

const userReportStatus = hasUserReportChatRoomAlready();

// check if user reported chat room message already

        const reportStatus = userReportStatus();

            alert('이미 신고하신 채팅방 메시지입니다.');

또한, 위의 코드는 프론트에서 구현하였기 때문에 소기의 목적을 위해서는 서버 / DB로 값을 넘겨서 구현하는 것이 더 올바른 방법이다.

그런데 왜 굳이 Clouser로 구현하였을까? 

다른 방법들을 예로들자면, state / ref / redux 등 다양한 방법을 사용하여 

심지어는 __proto__ 속성을 이용하여, 참조하는 상위 객체의 값을 업데이트하여 값을 유지시키는 방법도 있다.

(여담으로, 리액트는 내부적으로 state값을 closure를 이용해서 기억한다.)

일단 캡슐화를 통해서 내부의 값을 보호할수 있다거나, 전역 변수의 사용을 줄일수 있고, 모듈성 및 재사용성에서의 이점등이 존재한다. 

코드 가독성 측면에 있어서는 가독성이 높다는 점에는 동의하기 힘들지만,

사용하다보면 익숙해지는 것이 프로그래밍이다.

같은 코드를 무한정 반복하는 것은 가독성 측면에서 좋을수 있다. 

그러나 요즘들어, 실력이 느는 것이 더뎌지는 느낌이 든다.

이전에는 사용하지 않은 방식들로 내 스스로에게 자극을 주고싶어서 쓴 이유가 제일 크다. 

클로저의 실무 사용 (1)

Body Parser란?