Hook 이란?

후킹은 소프트웨어 공학 용어로, 운영 체제나 응용 소프트웨어 등의 각종 컴퓨터 프로그램에서 소프트웨어 구성 요소 간에 발생하는 함수 호출, 메시지, 이벤트 등을 중간에서 바꾸거나 가로채는 명령, 방법, 기술이나 행위를 말한다. https://ko.wikipedia.org/wiki/%ED%9B%84%ED%82%B9

 

hook은 React 에만 있는 것이 아닙니다.  거의 모든 프로그램에서 Hook을 지원합니다. 기존에 정해진 프로그램의 흐름 중간에 사용자가 임의로 개입하여 별도의 추가적인 일을 실행시킬 수 있게 해 주는 툴입니다.

즉, 이미 만들어진 프로그램 중간에 나만의 로직을 추가하는 것!!!

이와 관련된 유튜브 영상입니다. 
https://www.youtube.com/watch?v=tgmvleK5vZI&ab_channel=WebDevelopmentwithAlexMerced

 

 

영상을 따라해 보겠습니다.

 

Main.js파일을 다음과 같이 작성합니다.

const mainApp1 = () => {     console.log("첫번째 작업을 시작합니다. 와우 신난다~~~");     console.log("두번째 작업을 시작합니다. 와우 신난다~~~");     console.log("세번째 작업을 시작합니다. 와우 신난다~~~");     console.log("네번째 작업을 시작합니다. 와우 신난다~~~"); } mainApp1();

 

다음과 같은 기존의 로직이 있다고 가정해 봅니다.

 

실행결과

첫번째 작업을 시작합니다. 와우 신난다~~~ 두번째 작업을 시작합니다. 와우 신난다~~~ 세번째 작업을 시작합니다. 와우 신난다~~~ 네번째 작업을 시작합니다. 와우 신난다~~~

 

기존의 로직의 중간에 새로운 작업을 추가하고 싶다면 어떻게 할까요?

대부분 다음과 같이 합니다. 

// 두번째와 세번째에 나만의 로직을 넣고 싶다. const mainApp2 = () => {     console.log("첫번째  작업을 시작합니다. 와우 신난다~~~");     console.log("두번째 작업을 시작합니다. 와우 신난다~~~");     console.log("추가하고 싶은 나만의 로직!!!!");     console.log("세번째 작업을 시작합니다. 와우 신난다~~~");     console.log("네번째 작업을 시작합니다. 와우 신난다~~~"); } mainApp2();

 

첫번째 작업을 시작합니다. 와우 신난다~~~ 두번째 작업을 시작합니다. 와우 신난다~~~ 추가하고 싶은 나만의 로직!!!! 세번째 작업을 시작합니다. 와우 신난다~~~ 네번째 작업을 시작합니다. 와우 신난다~~~

 

하지만 위의 방법을 사용할 수 없는 경우가 대부분입니다. 

 

가장 간단한 방법이지만 사용자들은  이미 라이브러리 개발자들에 의해 만들어진 mainApp() 라는 함수를 호출만 해서 사용하는데 이 함수 내부의 어떤 시점에 단 몇 줄의 로직을 추가하려고 라이브러리 전체를 분석하고 추가하는 일은 매우 어렵고 비효율적인 일입니다.

 

실제로 우리는 mainApp() 라는 함수 자체를 수정하는 작업은  현실적으로 불가능하다고 보는것이 타당할 것입니다. 그래서 대부분의 라이브러리 개발자들은 이런 문제를 해결하기 위해 사용자들이 새로운 로직을 주입할 수 있는 기능을 미리 만들어 제공해주데 이것이 바로 hook입니다.

결론부터 말하자면 mainApp() 를 호출할때 주입할 함수를 매개 변수로 넘겨주는것 입니다. mainApp()의 개발자는 이 함수의 어느어느 시점에 사용자가 원하는 로직을 끼워넣을 수 있다고 미리 설명을 해주면 되는것 입니다.

 

const mainApp3 = (hook) => {     console.log("첫번째 작업을 시작합니다. 와우 신난다~~~");     console.log("두번째 작업을 시작합니다. 와우 신난다~~~");     hook();     console.log("세번째 작업을 시작합니다. 와우 신난다~~~");     console.log("네번째 작업을 시작합니다. 와우 신난다~~~"); } mainApp3(()=>{     console.log("추가하고 싶은 나만의 로직!!!!"); });

 

첫번째 작업을 시작합니다. 와우 신난다~~~ 두번째 작업을 시작합니다. 와우 신난다~~~ 추가하고 싶은 나만의 로직!!!! 세번째 작업을 시작합니다. 와우 신난다~~~ 네번째 작업을 시작합니다. 와우 신난다~~~

 

callback 함수를 이용하여, mainApp() 를 호출할 때에 2단계와 3단계 사이에 호출하고 싶은 함수를 넣을 수 있도록 변경해 보았습니다., 그리고 호출시 실행하고 싶은 로직을 callback함수로 넘겨주면 됩니다. 이것이 바로 hook 의 핵심 아이디어입니다.

 

기존의 로직 사이에 어떠한 사용자 정의 로직을 추가로 넣고 싶을 때 사용한다

그런데 아직 완벽한 해결방법은 아닙니다. 사용자가 원하는 부분에 원하는 작업을 추가할 수 잇도록 해야만 합니다. 이런 기능은 라이브러리 개발자의 몫입니다. 친절한 라이브러리 개발자는 라이브러리 사용자들이 주입을 원할 만한 곳에 본인이 원하는 로직을 주입할 수 있도록, 즉, 사용자가 원하는 위치에 hook을 적용할 수 있도록 해 줄 것입니다.

 

코드를 다음과 같이 변경합니다. 단계별로 원하는 함수가 있으면 실행을 해줍니다.

삼항연산자를 이용하여 함수가 있으면 실행하는 코드를 단계별로 추가했습니다.

const mainApp4 = (hooks) => {     typeof hooks.step1 === "function" ? hooks.step1() : null;     console.log("첫번째 작업을 시작합니다. 와우 신난다~~~");         typeof hooks.step2 === "function" ? hooks.step2() : null;     console.log("두번째 작업을 시작합니다. 와우 신난다~~~");         typeof hooks.step3 === "function" ? hooks.step3() : null;     console.log("세번째 작업을 시작합니다. 와우 신난다~~~");         typeof hooks.step4 === "function" ? hooks.step4() : null;     console.log("네번째 작업을 시작합니다. 와우 신난다~~~");         typeof hooks.step5 === "function" ? hooks.step5() : null;   } mainApp4({     step1 : ()=>console.log('작업을 준비합니다.....'),     step3 : ()=>console.log('잠시 휴식을 취합니다. 휴우~~~'),     step5 : ()=>console.log('작업을 마무리합니다.....') });

 

작업을 준비합니다..... 첫번째 작업을 시작합니다. 와우 신난다~~~ 두번째 작업을 시작합니다. 와우 신난다~~~ 잠시 휴식을 취합니다. 휴우~~~ 세번째 작업을 시작합니다. 와우 신난다~~~ 네번째 작업을 시작합니다. 와우 신난다~~~ 작업을 마무리합니다.....

 

이제는 mainApp() 의 함수를 조금도 건드리지 않고, 각 프로세스 사이사이에 우리가 원하는 로직을 집어넣을 수 있게 되었습니다. 이것이 hook 의 핵심입니다.

 

Hook 이란? 

기존의 정해진 프로세스 중간중간에  사용자가 원하는 임의의 로직을 주입할 수 있게 해 주는 툴입니다.