계기
오늘은 퍼블리싱 일하고 있는 대학 후배가 회사에서 진행하는 스터디가 너무 어렵다며
헬프 요청을 해서 퇴근하고 도와주러 갔다가 다음주 스터디 주제가 제어의 역전이라고 듣고
(나도 잘 모르는데...)
눈 앞에 보이는 a태그를 통해 설명한 내용을 간단히 공유하고자 한다.
제어의 역전(IOC)
우선 제어의 역전은 말 그대로 '내가' 가질 수 있는 제어권을 '외부'에 위임하는 것을 의미한다.
조금 더 구체적인 예를 들기 위해, 화면을 그릴 수 있는 Drawer 라는 객체가 있다고 하자.
Drawer 가 Light 또는 Dark 모드로 화면을 그릴 수 있다면
제어의 역전은 Drawer 가 어떤 모드로 화면을 그릴지 결정하는 제어권을
Drawer 가 가지는 것이 아닌, Drawer 를 사용하는 외부에 위임하는 것을 의미한다.
Drawer 가 제어권을 가진다면 아래와 같은 코드를 짤 수 있다.
Drawer 가 아닌 Drawer 를 사용하는 외부에서 제어권을 가진다면 아래와 같은 코드를 짤 수 있다.
만약 Drawer 가 제어권을 가진다면, 다른 모드로 그려야 할 경우 Drawer 내부를 수정해야 한다.
하지만 Drawer 가 아닌 외부에서 제어권을 가진다면,
다른 모드로 그려야 하는 경우 Drawer 가 아닌 사용하는 외부의 코드만 변경하면 된다.
사실 작성하고 보니, Light & Dark 모드는 토글(toggle) 기능도 필요해서
예시와 다르게 구현하는 편이 좋을 것 같고, 예시는 우선 토글 기능이 없다고 생각하자.
a태그에서의 IOC
앞서 a태그를 통해 친구에게 제어의 역전을 설명했다고 했는데
그렇다면 a태그의 어느 부분에서 제어의 역전을 살펴볼 수 있을까?
바로 'onClick' 과 같은 이벤트 리스너에서 제어의 역전을 찾아볼 수 있다.
a태그는 클릭 이벤트가 발생했을 때의 행동(리액션) 을 스스로 정하지 않고
onClick 이라는 이벤트 리스너를 통해 외부에서 행동을 주입 받는다.
다시 말해, 클릭 이벤트가 발생했을 때의 행동의 제어권을 스스로 갖지 않고 외부에 위임하는 형태가 된다.
따라서 우리는 클릭 이벤트에 대해 다양한 처리를 할 수 있으며,
만약 a태그가 스스로 제어권을 가진다면 우리는 클릭 이벤트가 발생하더라도 a태그가 지정한 행동만을 기대할 수 있다.
마치며
우선 이번 포스팅에서 a태그를 통해 제어의 역전이 동떨어진 어려운 개념이 아닌, 실제 자주 접할 수 있는 개념이라는 이야기를 하고 싶었다. 그리고 앞서 a태그만을 이야기했는데, 이벤트 리스너를 포함하는 다른 html 태그 또한 마찬가지라고 생각한다.
물론 a태그에서 제어의 역전을 살펴볼 수 있다는 생각이 디테일한 부분에서 근거가 많이 부족할 수도 있다.
사실 객관적으로 제어의 역전에 대해 디테일한 면은 하나도 모르는 것 같다.
(피드백은 언제든 환영이에요! 댓글 남겨 주시면 감사하겠습니다!)
그냥 큰 맥락에서 봤을 때 유사한 부분을 발견한 것 같아 머릿속 개념들을 이어보고
즐거운 마음에 포스팅을 남기게 되었는데 가벼운 마음으로 읽어 주시면 좋을 것 같습니다!
