React Hook 동작 원리(Closure)

1. Hook을 왜 사용하는가?(커스텀 훅을 사용하는 이유)

컴포넌트를 쪼개서 재사용. "상태 관리 로직"을 재사용할 수 없을까?

시도 1: 함수들을 한 군데 모아서 모듈화? => hook 규칙에 따라 함수 컴포넌트에서만 hook을 호출할 수 있기 때문에 에러

=> 상태관련로직은 "컴포넌트 안"이 아니면 사용할 수 없다.

Hook 규칙 : by 공식문서

• 리액트 함수 컴포넌트에서 훅을 호출하세요
• 커스텀 훅에서 훅을 호출하세요.

시도 2 : 커스텀 훅에서는 훅을 호출할 수 있다?

커스텀 훅이란 내가 필요로 하는 상태 로직들을 모아 직접 커스텀한 훅을 이야기 힌다.
(우리가 필요한 상태 로직을 모아서 직접 새로운 훅을 커스텀해서 만들어보는 것)

그런데.. 상태 관련 로직을 재사용해야 하는 상황이 대체 언젠데?

e,g, (친구리스트에서 온라인 여부를 알려줘야 하는 상황 ; 초록 표시)

• 서버로부터 온라인 여부 받아오는데 이를 컴포넌트가 보여저야 함.

• 예시 컴포넌트

이게 나중에 채팅 미리보기 까지 들어가고 하면 코드가 길어짐 ㅣ 상태 로직 분리해야한다. => 커스텀 훅 사용

1. 가벼워지고 가독성도 올라감 => 나중에 useFriendStatus만 받아서 쓰면 됨
   

좋은 컴포넌트 : 어떤 겨과물인지 보기만해도 알 수 있는 컴포넌트

2. 중복코드가 사라진다.(원하는 걸 언제든 사용 가능)

2. Hook을 사용하면서 알아야 할 점

1. Hook으로 관리하는 상태와 전역 상태 관리 차이

• 전역 상태는 하나의 state 공유. 어느 곳에서 변경시키든 구독하고 있는 모든 곳에 변경된 값이 반영
  = 훅 사용하면 그 안의 state, effect가 완전히 독립적
  => 리덕스의 전역상태가 상태를 공유하는 것이라면 훅은 상태에 관한 로직을 공유

2. 사용자 정의 훅의 이름은 "use0000"로 시작

• 이를 따르지 않으면 특정 함수가 그 안에서 훅을 호출하는지 알 수 없어서 규칙 위반 여부를 자동으로 체크 못 함.

---

3. 클로저(Closure)

면접 단골 질문

훅은 완전히 캡슐화, 호출될 떄마다 현재 실행중인 구성 요소 내에서 격리된 로컬 상태(by 공식문서)

1. 렉시컬 스코프 : 어휘적 범위? => 정적스코프!

• 함수를 어디서 호출했는지가 아니라 어디서 선언했는지에 따라 변수의 실제값이 결정된다는 것 => "함수는 자신이 태어나는 순간을 기억하고 있다."
• 클로저는 왜 클로저? : 말 그대로 닫아서 폐쇄시키기 때문

a가 갇힌다.(수정, 조적X) ; 데이터 흐름이 명확

4. 훅과 클로저가 왜 관계있나?

• useState추측 : state를 직접 변경할 방법이 없다. => set~함수만 제공받는다.
• 이처럼 변수 앖을 직접 조작할 수 없게 통제하는 점에서 관계가 있다.