🌸🌸 Hook (나? 리액트의 꽃인듯) 🌸🌸
Hook의 탄생비화 줄거리(summary 랄까? 암튼 그런거)
- class형 컴포넌트는 state와 Life Cycle의 관리가 가능하지만 컴포넌트 상태로직을 재활용하기 어렵고, this의 동작방식의 오류 가능성이 있으며 메모리 자원을 낭비한다는 단점이 있었다. 그리하여 state관리와 Life Cycle관리는 불가능하지만 메모리 자원의 낭비를 줄일 수 있다는 함수형컴포넌트를 사용하기에 이르렀다.
cf. 메모리 자원 낭비? 모르겠는데? 그럴수있찌!
예를 들어서 class형 컴포넌트에서는 setState()함수를 통해 "모든" state를 업데이트 했단말얏! 그런데 useState()함수를 사용하면 변수 "각각"에 set함수가 존재하게 되는데 이거를 개별적으로 관리할 수 있게되는거얏!!
함수형 컴포넌트에 state와 Life Cycle관리를 연동할 수 있게 하는 함수를 생각해 냈는데........이것이 바로! 🌸hooks🌸
함수여, 상태를 가져라!
리액트는 useState를 통해 생성한 상태에 접근하고, 유지하기 위해 closure를 이용해서 함수형 컴포넌트 바깥에 state를 저장한다!
함수형 컴포넌트가 어땠냐면?
함수형 컴포넌트가 리렌더링 되는 경우!
함수 안에 작성된 모든 코드가 다시 실행됨
다시 말해, 함수 컴포넌트 안에서 state를 저장할 수 없음!
🫶🏻 조금 더 쉽게, 쉽게!
함수형 컴포넌트 안에는 state가 저장될 수 없다는 단점을 보완하기 위해, useState 함수를 이용하여 함수형 컴포넌트 바깥에 state를 저장하고 관리한다!
여기까지가 hook의 탄생비화 였다 ! 나는 지금까지 hook를 탄생시키기 위해 component를 주절주절.....
hook이란?
hook총정리_최종진짜최종진짜진짜최종진짜마지막진짜진짜마지막(했던말 반복주의).txt
hook은 2018년 React Conf에서 Sophie Alpert와 Dan Abramov에 의해서 처음소개 되었고, 이후 React 16.8.0 버전부터 배포됨
hook이 없던 그때는?
"컴포넌트 사이에서 상태로직을 재사용하기 어려웠지" 그래서 이를 보완하기 위해! render props, 고차컴포넌트(HOC)를 활용했지만 이는 컴포넌트의 재구성을 강요하고 코드를 추적하기 어렵다는 단점과 wrapper hell이라는 부작용을 야기했단마랴
특히, class형 컴포넌트는 JS의 this키워드가 다른 언어에서와 다르게 작동한다는 점때문에 혼란을 야기하고, 재사용과 구성이 어렵게 만들었다!
hook을 뽑아 주신다면 ! (부제: class 없이 React기능을 사용하는 방법을 제시하겠습니다!)
- props, state, context, refs, Life Cycle등의 리액트 개념에 더 직관적인 API를 제공하겠습니다!
- 컴포넌트에서 Hook의 공유를 쉽게 만들겠습니다! 다시 말해, 컴포넌트로부터 관련로직의 추상화를 가능하게 하여 독립적인 테스트와 재사용이 가능하고, 계층의 변화없이 상태관련 로직을 재사용 가능하게 하겠습니다!
hook의 특징
hook은 요..
- React 함수 컴포넌트 최상위에서만 hook을 호출할 수 있음
컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 hook 호출을 보장할 수 있다. - React함수 에서만 Hook을 호출할 수 있음
custom hook에서도 호출 가능(일반 js함수, class형 컴포넌트에서 호출 불가) - Hook을 만들때 'use'붙이기
hook이 적용되었는지 파악이 용이함
Hook의 오해
- hook이 등장했다고 하더라도 class형의 컴포넌트가 사라지지 않음! ( 앞으로 계속 유지됨)
- hook이 당장 필요 없다면 사용할 필요 없음
- 기존 코드를 다시 작성할 필요가 없음! 일부 필요한 컴포넌트안에서만 Hook을 사용하면 됨!
결론
함수형 컴포넌트를 보완하기 위해 등장한 함수가 Hook(class없이 React기능 사용 가능)이고, Hook이 등장했다고 하더라도 class형 컴포넌트가 사라지지 않기 때문에 기존 코드를 다 엎어야 한다는 생각은 하지 않아도 됨
