Hooks를 사용해야 하는 이유
Hooks를 사용하면 코드를 간단 명료하게 작성할 수 있다.
Hooks를 사용하지 않은 class형 React와 Hooks 를 사용한 함수형 React 둘의 코드 양을 비교해보자.
Hooks를 사용하지 않은 class형 React
React 함수형 과 Hooks 를 사용
Hook 사용 규칙
-
최상위(at the top level)에서만 Hook을 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.
-
React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다.
-
일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다. (Hook을 호출할 수 있는 곳이 딱 한 군데 더 있습니다. 바로 직접 작성한 custom Hook 내입니다.
Hook : useState()
useState를 호출하는 것은 무엇을 하는 걸까요? “state 변수”를 선언할 수 있습니다. 위에 선언한 변수는 count라고 부르지만 banana처럼 아무 이름으로 지어도 됩니다. useState는 클래스 컴포넌트의 this.state가 제공하는 기능과 똑같습니다. 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않습니다.
useState의 인자로 무엇을 넘겨주어야 할까요? useState()Hook의 인자로 넘겨주는 값은 state의 초기 값입니다. 함수 컴포넌트의 state는 클래스와 달리 객체일 필요는 없고, 숫자 타입과 문자 타입을 가질 수 있습니다. 위의 예시는 사용자가 버튼을 얼마나 많이 클릭했는지 알기를 원하므로 0을 해당 state의 초기 값으로 선언했습니다. (2개의 다른 변수를 저장하기를 원한다면 useState()를 두 번 호출해야 합니다.)
useState는 무엇을 반환할까요? state 변수, 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환합니다. 이것이 바로 const [count, setCount] = useState()라고 쓰는 이유입니다. 클래스 컴포넌트의 this.state.count와 this.setState와 유사합니다. 만약 이러한 문법에 익숙하지 않다면 현재 페이지의 끝에서 살펴볼게요.
Hook : useInput()
useInput은 기본적으로 Input을 업데이트 한다.
Hook : useHistory()
기본적으로 useHistory()는 history개체에 대한 액세스를 제공 하고 페이지를 탐색하는 여러 기능에 액세스할 수 있습니다. 탐색에 관한 모든 것이다.
- length(숫자): 방문한 페이지의 길이.
action(string): (POP, PUSH, REPLACE)
POP: url을 통한 경로 방문, history go 함수( history.goBack(), history.goForward(), history.go()) 사용
푸시: 사용 history.push()
교체: 사용 history.replace()
.push(pathname: string, state: any)/(location: object): 경로 또는 위치를 히스토리 스택으로 push합니다.
- .replace(pathname: string, state: any)/(location: object): 기본적으로 push와 비슷하지만 기존 기록을 제거하고 새 기록으로 업데이트합니다. 사용자가 브라우저를 다시 클릭할 때마다 .replace이전 브라우저 로 돌아가지 않습니다.
.goBack(): 이전 기록으로 돌아갑니다.
.goForward(): 이전 기록으로 이동합니다.
.go(delta: number): 다른 색인으로 이동하고 이 위치에서 얼마나 많은 색인을 지정할 수 있습니다(음수 또는 양수일 수 있음).
