- Hooks를 조건문 안에 절대 넣으면 안되고, 함수나 반복문 안에도 웬만하면 넣지 말자.
- 아래 코드와 같이 hooks는 조건문 안에 넣으면 안된다. 반복문의 참,거짓여부에 따라 실행되는 순서가 달라지면 안되기 때문.
useState([]);
useState(1);
if(~){
useState(false);
}
useMemo- 다른 hooks안에 hooks를 넣지 말자.
- useEffect, useCallback, useMemo가 실행될 수도있고 안될수도 있는 상황이 있을 수도 있기 때문.
useEffect(()=>{
useState(~);
},[]);
useCallback(()=>{
useState(~);
},[]);
useMemo(()=>{
useState(~);
},[]);
지금까지의 내용 정리
- useMemo는 값을 저장한다. (함수의 반환값), 의존배열 요소들이 바뀌기 전까지
- useCallback은 함수 자체를 기억한다. 의존배열 요소들이 바뀌기 전까지
- useEffect는 전달받은 콜백함수를 실행한다. 의존배열 요소들이 바뀔 때.
- 두번째 배열들의 인자들이 바뀌면 앞에것들이 다시 실행된다!
useEffect심화
- componentDidMount에서는 아무것도 안하고, componentDidUpdate에서만 ajax 요청을 하고싶다면? 아래의 패턴을 기억하자.
const mounted = useRef(false);
useEffect(()=>{
if(!mounted.current){
mounted.current = true; //componentDidMount를 막을 순 없으니 이렇게 아무것도 안하도록 해두면 된다.
} else {
//ajax 요청
}
},[바뀌는값])- componentDidUpdate만 하고 싶다
useEffect(()=>{
//ajax 요청하면됨.
},[])componentDidUpdate(prevProps,prevState){
if(prevState.winNumbers !== this.state.winNumbers){
console.log('로또 숫자를 생성');
}
if(~){
}
}
useState(()=>{
console.log('로또 숫자를 생성');
},[winNumbers])componentDidUpdate는 하나의 메서드에서 모든 state를 나열해서 사용한다. (가로)
hooks에서 useEffect는 따로따로 사용.. state들이 바뀌었을 때 각각 실행되어야하는 코드가 다르면 useEffect를 여러 개 만들면 된다. (세로)
componentDidUpdate는 한방에 해당 메서드에서 처리
hooks에서는 useEffect별로 따로따로.