훅의 사용

다음을 지켜야 리액트가 각 Hook의 상태를 제대로 기억하고 사용

규칙 1: 하나의 컴포넌트에서 훅을 사용하는 순서는 항상 같아야 한다,

• if문 안에서 훅 쓰지 말것 => 실행 안 될수도 있기에
• for문 안에서 훅 쓰지 말것 => for문 조건 따라 실행 횟수 달라지고 실행 안될수도 있기에
• 함수 안에서 훅 쓰지 말것 => 함수가 실행 안될수도 있기에
  리액트는 훅이 사용된 위치를 기반으로 훅 데이터를 관리하기에

규칙 2: 함수형 컴포넌트 혹은 커스텀 훅 안에서만 사용해야(일반함수/클래스형 컴포넌트에서 쓸 수 X)

예시

import React,{useState,useEffect} from 'react';

function MyComponent () {
    const [value,setValue] = useState(0);
    // 1. if문 안에서 Hooks 사용 X
    if (value===0) {
        const [v1,setV1] = useState(1);
    } else {
        const [v2,setV2] = useState(2);
        const [v3,setV3] = useState(3);
    }
    // 2. for문 안에서도 Hooks사용 X
    for (let i=0;i<value;i++) {
        const [num,setNum] = useState(i)
    }
    // 3. 함수 안에서도 Hooks사용 X
    function func () {
        const [seoul,setSeoul] = useState('Lite');
    }
}

function Profile ({id}) {
    //return 값 다음에도 쓰지 말자, 이러면 조건 따라 Hooks의 실행 횟수/순서가 달라지기에
    const [userId,setUserId]  = useState(null);
    useEffect(() => {
        effect
        return () => {
            cleanup
        }
    }, [input])
    if (!user) {
        return null;
    }

    const [value,setValue] = useState(1);
    
    return (
        <div></div>
    )
}

function Profile ({id}) {
    //다음과 같이 return값은 return끼리 인접하게 붙여서 쓰도록 했다.
    const [userId,setUserId]  = useState(null);
    useEffect(() => {
        effect
        return () => {
            cleanup
        }
    }, [input])

    const [value,setValue] = useState(1);
    
    if (!user) {
        return null;
    }
    //return값이 Hooks실행 후에 있기에 Hooks의 실행이 달라질 일이 없다
    return (
        <div></div>
    )
}