오늘은 hook에 대해서 정리해보자✍🏻
출처 : https://ko.reactjs.org/docs/hooks-overview.html
역시 갓벽한 문서💙
Hook이란?
class를 작성하지 않고도 state와 다른 React기능을 사용할 수 있게 하는 기능
class안에서는 동작하지 않음
class에서 사용하던 state와 life Cycle method를 hook으로 사용 할 수 있다!
State Hook
class : setState
state를 기존 class에서는 setState로 관리했었다
class NameCard extends React.Component {
constructor(props) {
this.state = {
name: "lemon",
}
}
};
render() {
return
<input value={name} onClick={(e)=>this.setState({name:e.target.value})}
}function : useState
render()단계에서만 집중하면 된다.
import React, {useState} from 'react';
function Example() {
const [name,setName] = useState('이름');
return
<input value={name} onChange={(e)=>setName(e.target.value)}/>;
}useState는 현재의 state와 업데이트해주는 함수를 쌍으로 제공함!✨
useState는 이전 state와 새로운 state를 합치지 않는다!
useState는 인자로 초기 state값을 받는다!
setStatehook의 state는 객체일 필요가 없다!
이 초기값은 첫번째 렌더링에서 딱 한번 사용됨!
State Hook 여러개 선언하기
function ExampleManyStates() {
const [age,setAge] = useState(10);
const [name,setName] = useState('amy');
const [todos,setTodos] = useState([{text:'coding'}]);
}Effect Hook : 데이터를 가져오거나 dom을 조작할때 사용
useEffect는 함수 컴포넌트 내에서 side effects를 수행하게 해준다.
componentDidMount,componentDidUpdate,componentWillUnmount와 같은 목적으로 제공-> but 하나의 API로 통합됨
Effects는 컴포넌트 안에서 선언됨 -> 따라서 props, state에 접근 가능함!
Effect를 해제하고싶다면 -> 해제하는 함수를 반환하면 됨! (optional)
import React, {useState,useEffect} from 'react';
function Example() {
const [count,setCount] = useState(0);
useEffect(()=>{
document.title = `you clicked ${count} times`;
});
return (
<div>
<p> you clicked {count} times </p>
<button onClick = {()=>setCount(count+1)}>
Click me
</button>
</div>
);
}
조건부 effect
effect의 기본 동작은 모든 렌더링을 완료한 후 effect를 발생시킴.
의존성 중 하나가 변경된다면 effect는 항상 재생성됨.
useEffect에 두번째 인자를 전달하면 (이때 인자는 effect가 종속되어있는 배열의 값.)
조건부 effect가 작동함.
만약 effect를 한번만 실행하고 싶다면 두번째 인자로 [] 빈 배열을 전달 한다.
-> effect는 React에게 props나 state에서 가져온 어떤 값도 의존하지 않음을 보여줌!
-> 단, props와 state는 항상 초기값을 가진다!
Hook 사용규칙
- 최상위에서만 Hook을 호출함 (반복,조건,중첩된 함수 내에서 hook을 사용하지 말것)
- React 함수 컴포넌트 내에서만 Hook을 호출한다.
