220606_WIL

천처니·2022년 6월 6일
0

TIL

목록 보기
12/16

HOOK?

  • 공식문서를 참조하면, 리액트의 class형 컴포넌트에서 관리하던 state를 함수형 컴포넌트에서도 관리하기 용이하도록 hook의 개념을 도입했다고 하는데, 이미 공부를 시작한 시점에서 class 타입 컴포넌트를 사용하지 않은 나로서는 그 활용도나 편의성이 크게 와닿지를 않는다.
    그냥 당연히 hook을 쓴다고만 생각하고, 이를 일종의 매서드로 받아들이고 있었다.

관련 된 내용을 찾다 보니, hook의 개념이 도입 되기 전까지 함수형 컴포넌트는 stateless 컴포넌트 라고도 불렀다고 한다.(공부할게 늘었다)


Hook에는 규칙이 있다?

  • 반복문, 조건문, 중첩 된 함수 등 에서는 Hook을 사용할 수 없다.
  • 한 컴포넌트 내에서 여러개의 Hook이 사용 되는 경우 윗 줄 부터 작성 된 순서에 의해 호출 된다.

Hook은 남용하면 안된다

  • Hook은 browser의 메모리 자원을 사용하기 때문에 남용하면 코드의 분량은 줄어들겠지만 정작 클라이언트 입장에서는 성능저하를 야기할 수 있다.

그럼 대체 Hook 왜 쓰는거지?
대부분의 코드들이 규칙을 갖고 갖고 있다지만 이는 '언어'라는 의사 전달성에 따른 문법적 규칙일 뿐, 사용적인 제약은 크게 받지 않는 것으로 알고 있다.

[간장/의/심부름/을/엄마/도/한뒤 에] 라는 문장을 보면 조사와 명사가 마음대로 꼬여 의미 자체가 해석 되지 않는데, 이런 경우 단어의 나열이 될 뿐 언어로서의 기능이 사라지는 것과 같다.

그렇다면, 사용에 제한을 줄 수 있는 규칙도 있는데다 메모리 리소스 까지 사용하는 Hook을 왜 사용하는 걸까.

글의 초입에 언급한 것과 같이 내가 리액트를 공부하기 이전에는 class형 컴포넌트를 사용했었고, 이는 뒤이어 등장한 함수형 컴포넌트로 대체 되어 가면서 state의 유무로 함수형과 클래스형을 나누어 혼용했다고 한다.
확실히 이런 혼용 방식은 불필요한 work resource를 만들어냈을 것이라고 생각되는데, 이에 대한 보완책 역할을 하며 리액트라는 라이브러리를 사용하는 개발자들의 편의성 확보 측면에서의 이점을 확보할 수 있었으리라고 생각 된다.

0개의 댓글