Javascript를 배우기도 전, React로 FE의 입문을 해버린 탓인지,
늘 기본기가 부족하다고 느끼게됬고 최근엔 알고리즘, 시간복잡도, 메서드, 등에 집중을 하던 와중
생성자, 캡슐화, 상속, 클로저 부분을 공부하다가
흥미로운 글을 읽게되고 나도 정리하는 시간을 가지려고한다.
비디오는 useState와 useEffect를 Javascript에서 React라는 즉시호출함수를 만들고 실제 React와 같은 기능을 구사해보는 시간을 가지는데
때문에 클로저의 개념부터 시작하게 된다 !
위와같은 간단한 add함수를 그리면서 시작하는데 foo라는 변수를 전역 스코프에 선언하면서 시작한다. 때문에
위와같이 우리가 원하지 않는 곳에서 foo라는 변수를 private 상태로 지키지 못하게된다.
그래서 foo라는 변수를 보호하기위해 함수를 전역이 아닌 함수(지역) 스코프에 선언을 하고, 외부에서 foo를 재할당 하게되면
foo is not defined
라는 에러를 출력하게되면서 foo라는 변수를 private 상태로 지킬 수 있게 된다.
여기까지가 클로저의 개념인데,
때문에 W3Schools에서는 클로저를 이렇게 정의했다.
“Closure makes it possible for a function to have ‘private’ variables.”
그리고 비디오로 돌아가 다시 함수를 살펴보면 add()함수를 실행시킬때마다 변수 foo가 1로 초기화 되기때문에 우리가 원하던 함수가 아니게된다. 해서
함수 내부에서 ++ 하는 결과값을 반환하는 함수를 리턴해준다면 위와같이 원하는 결과를 얻을 수 있게되고 foo라는 변수또한 private하게 지킬 수 있게된다.
여기서 모듈패턴으로 리팩토링 하게되는데
많이 낯선 모습이었지만.. 모듈패턴과 즉시실행함수가 낯설다면 조금은 구글링을 해보는걸 추천한다 ! (나도.. 그랬으니까..)
간단하게는 유효범위를 설정하기 위해 캡슐화를 사용하는 객체 핸들링을 위한 방법론중 하나인데
유효범위를 설정한다는 말은 모듈을 작성함으로써 return 구문을 이용하여 공개될 영역과 내부적으로 처리할 영역을 구분하여 공개여부를 선택하게 하는 것이다.
아래의 useState를 보니 조금 더 이해가 잘되더라 !
모듈패턴으로 작성된 useState라는 함수는 내부에서 state와 setState라는 함수를 선언했고 외부스코프에서 state와 setState에 접근을 허용하게하는 유효범위를 설정하기 위해서 return으로 내보낸 모습이다.
그렇게 다시 count(state)와 setCount(setState)에 구조분해할당을 함으로써 useState함수에서 리턴한 state값을 통해서만 _val 변수에 접근 가능하게 하고, useState함수에서 리턴한 setState값을 통해서만 _val 변수를 변경하도록 하는 useState가 완성됬다 !!
2부에서는 React의 render()...
