개발자.. 너란놈..

※ 커스텀 훅 정리

- 커스텀 훅 : 리액트의 기본 훅을 활용해서 자주쓰는 기능들을 마치 플러그인처럼 하나의 패키지로 묶어서 재활용하는 형태
- 커스텀 훅 조건 : 
    1. 파일이름이 무조건 use로 시작 해야 됨
    2. 다른 리액트 hook안쪽에서는 호출이 불가능 useEffect
    3. 다른 핸들러 함수 안쪽에서도 호출이 불가능

- useQuery : 문자열로 구성이 고유의 쿼리키라는 것을 이용해서 비동기를 데이터를 가져와서 관리하기 위한 함수
 고유쿼리키(배열), 데이터패칭함수 , 리액트 쿼리 설정값 (객체) 
 비동기 데이터를 패칭해서 리액트 쿼리 설정값에 따라 캐싱처리한 후 리턴
 
- useMutation : 데이터를 가져오는 것 뿐만 아니라 서버의 데이터를 직접 변경 요청 할 수 있는 함수
- useQueryClient : 추가적인 인스턴스의 함수 호출하기 위한 객체

※ redux , react-redux

- redux

store : 어떤 컴포넌트에서든 자유롭게 데이터를 공유할 수 있게 컴포넌트 외부에 있는 독립적인 전역 데이터 공간
reducer : store의 데이터를 변경하는 변형자 함수 (dispatch로 전달 받는 action 객체로만 store 데이터 변경 가능)
action : 컴포넌트에서 reducer에 데이터변경 요청을 할때 쓰이는 특별한 형태의 객체 {type : '타입' , payload : '데이터'}

- react-redux

useDispatch : 컴포넌트에서 리듀서에 action 객체를 전달해주는 함수
useSelector : 컴포넌트에서 전역 store의 데이터를 가져오는 함수

redux 관련된 모든 함수들을 순수함수 형태로 구성이 되어야함 (Pure function)
- DOM이나 react의 외부 요인 없이 순수 자바 스크립트로만 동작되는 함수
- Side Effect (부수효과)를 발생시키지 않는 함수 - DOM에 직접적으로 변형을 가하지 않는 함수

순서 정리)
1. action.js -> 액션 생성후 리턴
2. reducer.js -> 액션 객체를 받아서 전역 데이터를 변형한 뒤 리턴
3. store.js -> 리듀서가 반환한 객체를 전역 store공간에 저장 후 export
4. index.js -> store 전역데이터 객체를 App 컴포넌트에 Provider로 전달
5. 원하는 컴포넌트 어디에서든 useSelector로 store 데이터 호출

※ useContext

  - 자식 컴포넌트의 DEVS가 많은 경우 최상위 컴포넌트에서 최하위 자식 컴포넌트까지 값을 일일이 전달하는 것이 비효율적
  - 이처럼 Prop을 통해서 중간단계의 컴포넌트들이 계속 값을 전달하는 상황 (prop Drilling)
  - 이때 Context API를 활용한 useContext hook을 활용하면 컴포넌트 외부에 전역으로 특정 값을 관리하며 자식 컴포넌트에게 바로 값 전달 가능

createContext : context 생성 후 Provider를 통해 전역으로 특정 값을 전달 가능
useContext : createContext로 생성된 값을 원하는 자식 컴포넌트에서 자유롭게 호출 가능

사용 순서)

1. 전역으로 관리할 저장객체 생성
   -  createContext를 이용해서 초기값을 null로 지정한 빈 객체를 생성
   -  해당 빈 객체는 추후 루트 컴포넌트인 App에서 Provider로 해당 값을 전역으로 자식요소에 전달

예제)

import { createContext } from 'react';
export const LoginContext = createContext(null);

2. 전역으로 생성한 빈 저장객체에 원하는 값을 저장
   -  null로 빈값이 저장되어 있는 LoginContext에 Provider로 원하는 값을 value로 지정해서 전달
   -  해당 LoginContext가 전체 컴포넌트들을 감싸고 있기 때문에 모든 자식 컴포넌트들은 추후 useContext를 이용해서 해당 값에 자유롭게 접근 가능

예제)

<LoginContext.Provider value={{ Login, setLogin }}>
  <main>
  <Header />
  <Content />
  </main>
</LoginContext.Provider>

   
3. 전역 정보값을 가져와서 로그인, 로그아웃 버튼 클릭시 해당 전역 정보값을 자유롭게 변경
   -  useContext를 이용해서 LoginContext값을 자유롭게 사용 가능

예제)

const login = useContext(LoginContext);

return (
    <article>
    <button onClick={() => login.setLogin(true)}>login</button>
    <button onClick={() => login.setLogin(false)}>logout</button>
    </article>
);

※ hooks

- 리액트 16버전에서 새로 나온 개념으로 리액트에서 자주쓰이는 상태관리, 생명주기 관련 내용들을 내장함수처럼 미리 만들어놓은 라이브러리 형태의 기능모음
- 리액트 hook의 등장으로 인해서 기존의 클래스형 컴포넌트 제작방식에서 함수형 컴포넌트 제작 방식으로 리액트의 작업 난이도가 낮아지면서 인기가 올라감

※ hook이 나오게 된 배경

- React16이전 버전에서는 클래스형 작업방식 , 함수형 작업방식

• 클래스형 작업방식 : 여러가지 클래스를 제작해서 서로 상속을 작업을 하다보니 코드의 가독성은 비교적 좋으나 반복코드 작업을 많이 했었어야 됨
• 함수형 작업방식 : hoc(high order component) 함수에 인수로 함수를 전달해서 새로운 함수를 리턴하는 방식, 반복 코드는 적으나 코드 가독성이 많이 떨어짐

- 함수형 작업방식의 문제점인 hoc를 활용하는 기능들을 라이브러리처럼 hook라는 개념으로 미리 만들어서 배포
- 2016년도 이후부터 hook의 등장으로 class형 방식에 비해 함수형 component 방식의 효율성이 증대 

React의 hook 삼대장 (useState , useEffect , useRef)
성능관리를 위한 hook (memo, useMemo , useCallback)
양방향 데이터 바인딩을 위한 hook (forwarRef , useImperativeHandle)