함수 컴포넌트

react는 class 컴포넌트로 작성되었다
class 컴포넌트는 몇 가지 심각한 문제점을 갖는데

1. 재사용 로직을 구현하기 어렵다
2. 너무 세분화된 생명주기 메소드가 복잡성을 증대시킴
3. this - 자바스크립트의 this가 생성이 아닌 호출 시 결정되기 때문에 동작에 대한 예측이 어렵다

이와 같은 이유로 리액트는 함수 컴포넌트로 작성하길 권장하고 있다

Hook

함수 컴포넌트에서 react의 기능을 사용할 수 있게 해주는 함수로
상태 관리, 생명주기 관리 등을 할 수 있다

useState

상태를 관리하는 hook으로
상태와 상태를 주입하는 set함수로 이루어져 있다

사용자와 화면으로 상호작용을 하는 프론트엔드 프로그래밍에서
click, change 등의 이벤트가 발생하였을 때
상태를 주입하여 상태를 변화시켜 화면을 전환하기 위해 사용

리액트는 기본적으로 상태 변화에 따라 화면을 재렌더링 한다

useEffect

리액트의 생명주기 메소드를 대부분 대체할 수 있는
생명주기 함수

default로 매 렌더링마다 실행되는 콜백 함수를 가지고 있음
deps 배열을 비우면 첫 렌더링에만
deps 배열에 상태를 넣어주면 첫 렌더렝 + 상태가 업데이트 될 때 실행됨