Hook

훅이란 리액트 v16.8 에 새로 도입된 기능으로 클래스형 컴포넌트의 중복 코드, 가독성등의 단점을 보안하기 위해서 함수형 컴포넌트에서도 사용되는 기술들을 의미한다!!(아마더 . .ㅎ)

useState

함수형 컴포넌트에서 state의 사용을 가능하게 한다
const [count ,setCount] = useState(0);
const [스테이트, 스테이트 변경함수] = useState(초기화);

useEffect

컴포넌트가 랜더링 될 때마다 특정 작업을 실행할수 있도록 한다.
mount, unmount, update 때마다 사용할 수 있음.

useEffect(()=>{}, [])
-> 생성할 때 ( 컴포넌트를 불러올 때 )
-> ex) 쇼핑몰 -> 상품 목록 불러올 때
-> 가장 처음에 사용자한테 보여줘야 하는 부분과 연관된 것들
useEffect(()=>{}, [값])
-> 업데이트될 때, 갱신될 떄 ( 값이 변할 때 )
-> ex) 쇼핑몰 -> 상품리스트에서 카데고리 누르면
useEffect(()=>{ return ()=>{} }, [])
-> 소멸될 때, 컴포넌트가 사라질 때
-> 인증
-> ex) 타이머, setTimeout

useRef

DOM에 직접적으로 접근하고 싶을때 사용!
이때 Ref를 사용하는데 Ref를 사용하기 위해서는 useRef 라는 Hook을 이용!

useMemo

📍메모리의 용량을 차지하니까 지양하는게 좋다! 꼭 필요할때만 사용하기
메모리에 값을 저장해주는 것으로, 오랫동안 계산이 필요한 값을 반복적으로 사용하고 싶을때 사용한다. 메모리에 저장을 해야하기 때문에 반듯이 return 값이 존재해야함

useCallback

📍메모리의 용량을 차지하니까 지양하는게 좋다! 꼭 필요할때만 사용하기
useMemo가 값을 저장하는 hook이라면 callback은 콜백함수 자체를 저장해 둔다.
함수도 일종의 오브젝트이기 때문에 렌더링 될때마다 새로 실행

useReducer

usestate로 복잡한 로직을 해결하기 힘들때 사용하는 hook

const [스테이트, 디스패치] = useReducer(리듀서, 스테이트의 초기값);
//state: 상태
//dispatch: 스테이트를 변경시켜 달라는 요구
//action: dispatch의 내용
//reducer: 실제로 state를 업데이트 시켜주는 매개체

useContext

= 상태관리
📍useContext를 사용하면 재사용하기가 힘들기 때문에 이것도 꼭 필요한 경우에만 사용해준다
app에서 사용하는 데이터를 c,e 컴포넌트에서 사용하고 싶을때는 props를 사용해 넘겨준다. 이런경우에 나머지 a,b..등등 다른 컴포넌트에서 props로 넘겨받은 데이터를 사용하지 않는다면 그때의 props는 넘겨주는 역할만 하게된다 즉 props drilling이 되는 것이다. 그래서 이걸 막기 위해 useContent 사용!

🚨
훅이 아닌 그냥 함수도 만들어서 쓸수 있는ㄷㅔ
그럴때는 utils 라는 폴더를 생성해서
만들어 주는 것이 좋다!