🌱Hook

기존에는 컴포넌트 내에서 State와 생명주기를 관리하기 위해 반드시 클래스 컴포넌트를 사용했어야 한다. 그러나 개발자가 느끼기에 다소 복잡한 클래스 컴포넌트를 보완하고 함수 컴포넌트에서 클래스 컴포넌트 기능을 구현하기 위해 React16.8 버전에 추가 된 것이다.

❗️Hook의 규칙

1️⃣ 최상위에서만 hook 호출 가능 (if,for문,callback에서 호출❎)
2️⃣ react함수에서만 호출
3️⃣ hook만들 때 앞에 꼭!!!!!!! "use" 붙이기
4️⃣ react는 hook 호출순서에 의존한다.

🌱state Hook

const App = () =>{
		const [state이름, setState이름] = useState(초기값)
    }

• useState는 컴포넌트 내 동적인 데이터 관리할 수 있는 hook이다.
• 최초에 useState가 호출될 때 초기값으로 설정되며 이후 재 랜더링이 될 경우 무시됩니다.
• state는 읽기전용, 수정x
• state를 변경하기 위해서는 setState를 이용
• state가 변경되면 자동으로 컴포넌트가 재 렌더링 된다.

🌱effect hook

const App = () =>{
		useEffect(EffectCallback(Deps에 지정된 변수가 변경될 때 실행할 함수), Deps?(변경을 감지할 변수들의 집합)
    }
    EffectCallback:Deps에 지정된 변수가 변경될 때 실행할 함수 
    Deps:변경을 감지할 변수들의 집합

• Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.
• 컴포넌트가 최초로 렌더링될 때, 지정한 state나 prop가 변경될 때 마다 이펙트 콜백 함수가 호출됩니다.

Custom Hook 만들어보기 ~