근데 Hook이 뭔가요?
https://ko.reactjs.org/docs/hooks-overview.html#but-what-is-a-hook
Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다.
Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다. (하지만 이미 짜놓은 컴포넌트를 모조리 재작성하는 것은 권장하지 않습니다. 대신 새로 작성하는 컴포넌트부터는 Hook을 이용하시면 됩니다.)
useEffect란?
React class의 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 기능을 하나의 API로 통합한 것이다.
https://ko.reactjs.org/docs/hooks-overview.html#effect-hook
React 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업을 이전에도 종종 해보셨을 것입니다. 우리는 이런 모든 동작을 “side effects”(또는 짧게 “effects”)라고 합니다. 왜냐하면 이것은 다른 컴포넌트에 영향을 줄 수도 있고, 렌더링 과정에서는 구현할 수 없는 작업이기 때문입니다.
import React, { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
const [count, setCount] = useState(0);
const [value, setValue] = useState("");
// componentDidMount, componentDidUpdate와 비슷합니다
useEffect(() => {
// 브라우저 API를 이용해 문서의 타이틀을 업데이트합니다
// document.p도 가능합니다.
document.title = `You clicked ${count} times`;
//document.querySelector('.testDiv')형식은 안된다. document.class이름은 된다.
document.div = `value의 값은 ${value}입니다.`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
<div></div>
<input
onChange={(e) => {
setValue(e.target.value);
}}
/>
<div>value의 값은 {value}입니다.</div>
</div>
);
}
click이나 입력값에 따라 state.count, state.value가 변경한다. 변경이 일어날 때 마다 Life Cycle 메소드가 작동하여 새로 렌더링 하듯이 useEffect 함수가 작동하여 새로 렌더링을 해준다.
배열 구조 분해
//배열구조분해로 두 개의 값을 만들고 있다.
const [fruit, setFruit] = useState('banana');
//다음과 같이 입력하면 배열구조분해와 같은 효과를 낼 수 있다.
var fruitStateVariable = useState('banana'); // 두 개의 아이템이 있는 쌍을 반환
var fruit = fruitStateVariable[0]; // 첫 번째 아이템
var setFruit = fruitStateVariable[1]; // 두 번째 아이템배열구조로 변수를 선언할 때는 [0], [1]로 배열에 접근하는 것은 좋지 않다.
useEffect를 해제하는 방법
Effect를 “해제”할 필요가 있다면, 해제하는 함수를 반환해주면 됩니다. 이는 선택적입니다(optional).
