[React] 함수형 프로그래밍과 hooks

2023.04.20 - [Dev/JavaScript] - [JavaScript] Scope & Closure

 

저번 글에서 React의 컴포넌트 생명주기 이야기를 했었는데, 

어찌 됐던 초창기 리액트의 클래스형 컴포넌트와 지금 많이 사용하고 있는 함수형 컴포넌트의 이야기를 안할 수가 없었다. 

대부분 주변 개발입문자들의 경우 React를 처음 접하거나, Java를 통해 개발을 해왔던 사람들의 경우에 이 부분에서 이해를 어려워하는 것 같았는데, 이 이야기를 한번 이해하기 쉽도록 해보고자 한다. 

 

1. React의 원래 이름?

React Native 라는 것도 있지만, 웹프론트개발자가 주로 사용하게 되는  React의 원래 이름,

즉 React의 풀네임은 뭔가? React.Js다.

뒤에 Js가 붙어있는 것으로 봐선 결국 JavaScript를 활용하게 된단 이야기일텐데,  그럼 React가 만들어둔 규칙 속에는 javaScript의 문법을 활용한 것들이 꽤 있을 것이라고 짐작할 수 있다. 그렇다 오늘 할 얘기도 JavaScript에 대한 지식을 활용할 수 있다면 더욱 이해하기 쉽다. 

 

2. 기억하는가 Scope와 Closure

뭐 깊은 얘길하면 수도없이 많은 이야길 해야하지만 다 잘라내고 간단하게 React에서 함수형 컴포넌트와 Hooks를 만들어 낼 수 있는 최고 주요 이유에 대해서만 생각해보자. 저번에 JavaScript에서 Scope와 Closure에 대한 것을 이야기 했었다. 이것을 활용하면 된다. (자세한 내용은 앞에 걸어둔 링크에서 확인하도록 하자. ) 함수는 유효범위(Scope)를 가진다. 이 Scope에 따라서 함수가 한번 실행되고 사라지더라도, 해당 함수가 리턴한 것들은 본인이 선언된 함수 내의 요소들을 기억하고 있다. 이게 함수형 컴포넌트, Hooks를 만들어 내는 원동력이라고 생각하면 된다. Router 혹은 상위 컴포넌트에서 해당 컴포넌트 및 hook을 호출하면 실행이 쭉 되고 마지막으로 Return 되는 요소는 앞서 실행한 것들을 기억하고 만들어진 결과물이라고 보면 될 것이다. 

 

3. Hooks?

사실 컴포넌트 이야기는 이 얘길 하려는데 기왕이면 같이 설명해두는게 좋지 않을까? 라는 생각에 쓴 얘기고 틀릴지도 모른다. 그치만 사용할 수 있을 만큼 이해하는것에는 충분히 도움이 됐으니 더 깊게 깊게 생각해보는건 나중으로 미뤄두고 Hooks에 대해서 알아보자. 

 

1) Hooks의 탄생 배경

React는 함수형 컴포넌트로 전환함에 따라, 함수 내부에서 상태(State)관리를 하기 위해 고심했던 것 같다. 기존의 Class형태일땐 전역변수 선언 한번으로 State라는 것이 선언 가능했지만, 함수는 실행되고 사라지는 녀석이기 때문에 선언되었던 값을 기억해야한다는 것이 걸림돌이 되었을 것이라고 추정한다. 

그래서 개발 된 것이 Hooks다. 결국 동일하게 Scope를 사용하게 되는 것인데, Scope를 생각해보면 함수가 선언된 시점의 전역변수를 기억하고, 그 내부의 로컬변수도 기억하는 유효범위를 가진다. 그리고 그 기억을 타고타고 전체를 기억할 수도 있는 Chain 과 같은 형태를 가진다. 그래서 Hooks다. 후크 선장의 손처럼 생긴 갈고리가 걸려있는 그 느낌.

 

2) Hooks와 일반 JavaScript 함수의 차이?

이게 진짜 모르는 사람들 기준 미쳐환장하던데, 그래서 뭔 차이냐? 앞에 use 붙은거 뺴곤 아무차이 없지 않냐? 라고 하더라. 이 차이를 이해하는데에 가장 중요한 개념은 기억이다. 

우리가 일반적으로 만드는 이벤트를 통해 실행되는 JavaScript 함수들을 살펴보면 그때 그때 실행시키고 사라져버린다. 

하지만 Hook은 컴포넌트가 렌더링 될 때 실행되겠지만,  무언가가 남는다. 즉, 무언가를 기억시키려고 만든 개념인거다. 

그래서 Hook은 호출 순서에 상당히 의존한다. 처음에 실행되고 계속 값을 가지고 있으면 다른 곳에서 사용해도 당연히 아무런 문제가 없겠지만,  해당 값을 필요로 하는 것보다 이후에 선언이 되어있다면 당연히 사용할 수 없다는 느낌과 같다. 

때문에 언제나 Hooks는 최상위 레벨에서 호출 되어야 하며 React 컴포넌트 내에서만 호출되어야 한다는 규칙을 가진다. 

(물론 예외적인 사용이 필요하다면 Custom Hook을 만들고 그 내부에 Hooks를 호출하는 방법을 권하기도 한다. )

 

솔직히 설명을 잘 헀는지 모르겠다.. 나중에 와서 보면 뭔 개소리야 할 것 같긴 한데... 

일단 기억에 남아있고 이해한대로 정리해두고 차차 제대로 정리하면 되겠지..