React 기초 학습 16.Hooks 팁, useEffect팁, ajax Hooks에서 하기(Zerocho님 강의 학습 의식의 흐름대로 노트 정리)

강의 유튜브 주소 :

https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn

 

 

Hooks에 관한 자잘한 팁들

use 시리즈들은 순서가 매우매우 중요해서 중간에 바뀌면 안된다.

const Test = () => {

    const [number, setNumber] = useState(); // 1
    const [string, useString] = useState(); // 2

 

조건문을 통해 생성의 여부를 결정하면 매우 위험하다.

const Test = () => {

    const [number, setNumber] = useState(); // 1
    const [string, useString] = useState(); // 2

    if(조건){
        const [array, setArray] = useState(); // 3
    }

    const [name, setName] = useState(); // 4

왜냐하면 위에 말했듯이 실행순서가 같아야하는데 조건문에 따라 실행순서가 달라질 수 있기 때문이다.

만약 조건에 따라서 4번인 변수가 3번이 되어버린다면 문제가 된다.

조건문 안에 넣으면 안된다.

그리고 반복문, 함수 안에도 최대한 넣지 않아야한다. (순서가 정말 확실한 반복문은 해도되나 추천하지 않는다)

그리고 최상위에 선언하는것이 좋다.

 

다른 useEffect안에서도 useState를 쓰면 안된다.

useEffect 내부에서 useState의 실행순서가 확실하지 않기 때문이다.

useEffect(() => {
    useState(); // (X)

 

아 그리고 ajax호출은 보통 componentDidMount에서 많이 하는데, 이것을 hooks에서 하고싶을때

useEffect에서 componentDidMount를 하는 기능을 흉내내야한다고 하면 

따로 useEffect를 생성해서 componentDidMount기능을 하도록 하면 된다.

2번째 인자는 빈배열!

useEffect(() => {
	// ...
}, []);

 

componentDidMount에서 안하고 componentDidUpdate나 다른 라이프 사이클에서 실행하고 싶을떄가 좀 까다롭다고 한다.

패턴으로 기억해두는게 좋다고 한다.

const mounted = useRef(false);

// componentDidUpdate만 하는법!!, componentDidUpdate에서는 안함
useEffect(() => {
    if(!moounted.current){
        mounted.current = true;
    }else {
        // ajax
    }
});

const flag = false;

useEffect(() => {
    if(!flag){
        flag = true;
    }else{
        // ajax    
    }
});