No.12 Hook

Hook?

훅은 갈고리, 낚시바늘 등을 뜻하는 영어 단어이다. react에서의 훅은 갈고리를 뜻하는건 아니지만, 갈고리와 같은 기능을 하기 때문에 연관지어 생각하면 좋다. react의 훅은 function component에서 배우는 개념인데, class component와는 쓰임새가 다르다. 왜 페이스북 개발자들은 function을 사용하기 시작했을까? 그 이유는 다음과 같다.

• class component의 단점

1. 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다.
2. 복잡한 컴포넌트들은 이해하기 어렵다.(= 생명주기 메서드에는 관련 없는 로직이 섞여들어가기 때문에 버그가 쉽게 발생하고 무결성을 쉽게 헤친다.)
3. Class은 사람과 기계를 혼동시킵니다.(= this 키워드를 알아야하며, 함수를 사용하기 위해선 bind 메서드를 사용해야한다.)

따라서 function component를 사용하는것이 더 쉽고 코드를 이해하는데 도움이 된다.

Hook 소개

Hook 사용 규칙

1. 무조건 최상위에서만 Hook을 호출해야한다.

// 나쁜예

import React, { useState } from "react";

function Hooks(props) {
	if (!props.isExist) {
	  const [state, setState] = useState(); // Error!
	}
	  const [state2, setState2] = useState(); // Error!
}

2. React 함수 컴포넌트 내에서만 Hook을 호출해야 한다.

일반 javascript 함수에서는 Hook을 호출해선 안된다.(custom Hook 내에서는 호출 👌)

State Hook

useState는 다음과 같이 사용하면되는데, 이 함수는 상태 유지 값과 그 값을 갱신하는 함수를 반환한다. 최초로 렌더링을 하는 동안 반환된 state는 첫 번째 전달된 인자의 값과 같다.

const [state, setState] = useState(initialState);

Effect Hook

useEffect는 함수 컴포넌트 내에서 side effects를 수 행할 수 있게 해준다.(componentDidMount, componentDidUpdate, componentWillUnmount가 하나의 API로 통합된것 🤩)

useEffect(function);

useEffect(() => {}, [count]) // 의존성 배열 (배열 안에 담긴 값들을 추적, 그때 마다 업데이트)

class의 setState 대신 useEffect를 사용하면 전달된 함수는 화면에 렌더링이 된 후에 수행하게된다.(어떤 값이 변경되었을 때만 실행되게 할 수도 있다.)

그 어떤 값을 보려면...

Class Monster를 function으로

//인자로 받아와야하는것은 props가 객체로 넘어옴
//const {name, age, id} = this.props;
function Mosters({name, age, id}){
	//state 
	const [monsters, setMonsters] = useState([]);
	const [userInput, setUserInput] = useState("");
	
	//componentDidMount -> 첫 번째 렌더 이후에만하라는것
	useEffect(()=> {
	  fetch("주소~")
	  .then((res) => res.json());
	  .then((res) => setMonsters(res);
	}, []);

	const handleChange = (e) => {
	    setUserInput(e.target.value);
	};
	
	return(
		<div className="Mosters">
		  <SearchBox handleChange={handleChange} />
		  <CardList monsters={filterdMonsters} />
		</div>
	)
}

👉 또스터가 기억이 안난다면? 또스터(class component)