const getDiaryAnaylysis = () => {
    const goodCount = data.filter((it) => it.emotion >= 3).length;
    const badCount = data.length - goodCount;
    const goodRatio = (goodCount / data.length) * 100;
    return { goodCount, badCount, goodRatio };
  });

  const { goodCount, badCount, goodRatio } = getDiaryAnaylysis();

일기에 좋은감정 + 나쁜감정 + 좋은 감정의 일기 비율에 대해서 보여주려고 한다

다만, 콘솔을 찍어서 확인해보니

일기를 수정할 때에도 호출이 되는 등 함수가 호출될 필요가 없는 상황에서도 불필요하게 호출이 되고 있었다

이럴 때 값을 기억하고 있는 useMemo 훅을 사용해보자 (연산결과 저장)

  const getDiaryAnaylysis = useMemo(() => {
    const goodCount = data.filter((it) => it.emotion >= 3).length;
    const badCount = data.length - goodCount;
    const goodRatio = (goodCount / data.length) * 100;
    return { goodCount, badCount, goodRatio };
  }, [data.length]);

  const { goodCount, badCount, goodRatio } = getDiaryAnaylysis;

useMemo로 감싼 후에는 더이상 함수가 아니기에 실행시키면 안됨

useMemo로 감싼 뒤에는 의존성 배열에 무엇이 바뀔때 호출이 될지를 적어두어야 함

우선 라우트 지정을 해준다

<Route path="order-summary" 
    element={ 
      <ProtectedRoute> 
          <Order/> 
      </ProtectedRout> }
                            />

[Checkout.js] 결제 모달창에서 결제하기 버튼을 클릭했을 때 state 값으로 useEffect를 통해 가져온 데이터와 상태값을 넘겨준다 (true / false)

 navigate("/order-summary", {
        state: {
          data: data,
          status: true,
        },
      });

[Order.js]

export const Order = () => {
  const { state } = useLocation();
  return <main>{state ? <Success data={state.data} /> : <Fail />}</main>;
};

주문 페이지에서는 가져온 데이터는 받아온 status 값에 따라 보여지며 성공했을 때 받아온 state 값으로 데이터를 불러올 수 있다

Success 컴포넌트에는 받아온 데이터를 뿌려서 작성해준다

주문완료 후 주문내역 페이지 만들기

[Dashboard.js]

const response = await fetch(
        `http://localhost:8000/660/orders?user.id=${cbid}`,

api 엔드포인트는 json-server-auth 에서 사용한 660 번에 유저 아이디를 가져와서 데이터를 가져올 수 있다

가져온 데이터를 통해서 빈 카트 또는 가져온 데이터에서 카트 데이터를 뽑아내서 뿌려주어 주문내역 카드 컴포넌트를 만들 수 있다

[ routes > ProtectedRoute.js ]

export const ProtectedRoute = ({ children }) => {
  const token = JSON.parse(sessionStorage.getItem("token"));
  return token ? children : <Navigate to="/login" />;
};

이걸 다시 모든 라우트들이 있는 파일에서 장바구니 페이지를 감싸주면 된다

장바구니에 있는 상품들을 결제 창으로 정보를 넘길 때

라우트 JSON 파일을 만들어 routes.json { "/users*": "/600" }

json-server-auth 600으로 하면 토큰을 가지고 있어야 정보 접근 가능하도록 해준다 (각각 번호를 다르게 하면 다른 설정이 가능)

JSON SERVER AUTH

npx json-server data/db.json -m ./node_modules/json-server-auth -r data/routes.json --port 8000 로 서버를 열어주자 (예전엔 -r routes.json 부분이 없었음 !)

[Checkout.js]

const [user, setUser] = useState({});

  useEffect(() => {
    const token = JSON.parse(sessionStorage.getItem("token"));
    const cbid = JSON.parse(sessionStorage.getItem("cbid"));
    async function getUser() {
      const response = await fetch(`http://localhost:8000/600/users/${cbid}`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
      });
      const data = await response.json();
      setUser(data);
    }
    getUser();
  }, []);

회원가입 할 때 세션 스토리지에 있는 cbid 와 토큰을 가져와서 결제 모달창을 열었을 때 useEffect 로 가져온다

url 은 위 routes.json 에서 설정하였듯 /600/users/cbid 로 하여 해당 아이디의 정보를 가져온다

헤더에 있는 인가는 토큰을 넘긴다

[Checkout.js]

결제모달 창에서 결제하기 버튼을 눌렀을 때 이름,이메일,상품 정보 등등을 넘겨야 한다

useCart를 사용해서 가져온 정보들을 넘겨주자 user 의 값은 위에서 useEffect를 통해 가져온 유저 정보를 넘겨주면 된다

위에서 설정한 인가 번호 660을 사용한 엔드포인트로 정보를 넘기기에 POST 를 사용한다

결제하기를 눌렀을 때 정보를 다 넘겼으므로 다시 장바구니는 비워주어야 한다 useCart로 가져온 clearCart 함수를 실행하여 장바구니를 비워주고 홈으로 돌려보내자

const [isCart, setIsCart] = useState(false)

useEffect(() => {
  const productInCart = cartList.find(item => item.id === product.id);

  if(productInCart){
    setInCart(true);
  }else{
    setInCart(false);
  }
}, [cartList, product.id]);

카트에 들어있는지 없는지에 대한 useState로 조건 확인 만들어준 다음

useEffect를 통해서 카트 리스트에 접근하여 일치하는 아이템의 id 가 있는지 확인

inCart의 참 거짓 여부로 보여주는 버튼 다르게 하기

재고 없는 상품 버튼 비활성화하기 (단순 css 조건 추가)

className={`product.in_stock ? "" : "cursor-not-allowed"`}
disabled={product.in_stock ? "" : "disabled"}

cursor-now-allowed 조건 추가 시 마우스 포인터에 금지표시(?) 가 추가된다

• 강의에서 기본으로 제공된 파일들을 제외하고 React-Query 사용 부분만 보기 !

커스텀 훅

커스텀 훅을 만들면 다양한 컴포넌트에서 사용이 가능하다 또한 키가 섞이는 걸 방지하며 함수가 섞이는 것 또한 방지할 수 있다

기초세팅

우선 빈 파일을 export const queryClient = new QueryClient(); 로 설정

메인 App 파일에서 QueryClientProvider 태그 안에 클라이언트는 위에 선언한 파일을 제공해주자

queryKeys 의 경우 키값들을 명시하여 오타 및 오류를 방지하는 용도로 사용 !

useIsFetching 훅을 사용해보자

작은 애플리케이션

• useQuery 가 반환하는 객체에서 isFetching 을 사용해서 (구조분해할당) fetching 에 대한 핸들링을 했었다
• isLoading은 ( isFetching + no cached data )

큰앱

• 현재 프로젝트에서는 로딩스피너로 fetching 중일 때 보여줄 것이다
• useisfFetching은 현재 fetching 중인지 아닌지 알 수 있다
• 또한 모든 커스텀 훅에 대한 isFetching 매번 쓸 필요없어진다
• useisFetching의 값이 0보다 크면 참으로 평가된다

import { useIsFetching } from 'react-query';

export function Loading(): ReactElement{
  const isFetching = useIsFetching();

  const display = isFetching ? 'inherit' : 'none';

  return (spinner)
}

에러 핸들링

쿼리 함수가 에러를 발생시키면 onError이 실행된다 React-Query 가 콜백에 에러 매개변수를 전달하기 때문에 다양한 방식으로 에러 처리가 가능하다

passing errors to toasts useQuery error 을 chakra UI toast에 넘겨주자 처음엔 싱글콜 -> 중앙화 centralized onerror 콜백 (과거엔 useQuery 가 반환하는 isError, error 을 사용했다) -> 에러 발생 시 run 한다 error parameter to callback toast = 메세지가 바닥에 튀어올라오는 것 (charkra ui가 같이 들고옴)

//useTreatments.ts

async function getTreatments(){
  ///data fetching
}

export function useTreatments(){
  const fallback = [];
  const { data = fallback } = useQuery(queryKeys.treatments, getTreatments);
  //fallback = 데이터를 가져올 때까지는 데이터가 없기에 (안하면 Undefinted 출력됨)
  return data
}

Global Error Handler 만들기 queryCache 디폴트로 전역 에러 핸들러를 포함하기 이렇게 하면 쿼리 캐시에 핸들러가 묶이게 된다 (개별 쿼리가 아닌)

//queryClient.ts

const toast = createStandaloneToast({theme});

function queryErrorHandler(){
  const title = error instanceof Error ? error.message : 'error connecting';
  toast({ title, status : 'error', variant: 'subtle', isClosable:true )}       
}

export const queryClient = new QueryClient({
        queryCache : new QueryCache({
            onError : queryErrorHandler,
        }),
});

구현해야 할 항목들을 나누어서 시작해보자 !

홈 화면

1. 최상단 -> 헤더 (좌우 버튼 클릭 시 월 단위 이동 가능하도록)
2. 버튼 -> 필터링 (최신순, 감정 점수에 따라 다르게 보이게)
3. 일기 보이기 (날짜, 내용, 감정에 따른 색깔 변화)

단, 필터링의 경우 데이터가 있어야 하니 일기 리스트를 먼저 구현 후 필터링을 구현하자!

[Home.js]

헤더에 있는 날짜 구현하기

오늘 날짜를 스테이트에 담아서 사용

현재날짜를 curDate 스테이트에 보관하여 사용

getMonth()의 경우 0월부터 시작하므로 + 1 을 해줘야 한다 !

버튼을 눌렀을 때 다음달, 전달로 이동하도록 increaseMonth, decreaseMonth 함수 작성 !

일기 리스트 구현하기

먼저 데이터가 필요하므로 -> [Emotion.js] 로 이동하여 더미 데이터를 작성, 활용하여 데이터 스테이트에 집어넣어준다

const [data,dispatch] = useReducer(reducer, dummyData);

다시 [Home.js] 로 돌아와 useContext 를 활용하여 데이터를 가져오자

const diaryList = useContext(DiaryStateContext)

• 가져왔지만 그냥 쓰면 안되고 날짜에 따라 가공해야 함

• 버튼을 눌렀을 떄 해당하는 연,월의 데이터만 뽑아야 하기 때문에 useEffect 사용하자 (curDate 가 변하는 순간에만 diaryList 에서 데이터 뽑아오기)

• 첫날, 마지막날을 구해서 그 사이 데이터만 뽑아내면 된다 !

• 의존성 배열 -> diaryList 넣어줘야함, 일기가 변경되었다는걸 뜻하기 때문에

• 콘솔에 찍어서 날짜에 따른 다이어리가 제대로 나오는지 확인해보자

• 근데 두번씩 실행된다 -> 처음에 빈 배열을 주었기 때문에 (길이가 >= 1 일때 실행할 수 있도록 조건문 추가 !)

일기를 뽑아냈고 리스트를 만들기 전에 필터링 기능을 만들어보자

[DiaryList.js]

최신순, 오래된 순 필터링 만들기

select 테그를 활용하여 선택메뉴를 만들자

프롭으로 받는 값들은 value, onChange, optionList 이다

value 는 어떤걸 선택하고 있는지 onChange 는 값이 변했을 때 바꿀 기능 optionList 는 옵션들을 받는다

const [soryType, setSortType] = useState('latest');

<ControlMenu
    value={sortType}
    onChanges={setSortType}
    optionList={sortOptionList}
/>

onChange 이벤트가 일어나게 되면 e.target.value 를 통해서 sortType의 값을 바꾸게 되고 선택한 값에 따라 sortOptionList 의 객체 값이 바뀌게 된다

바뀐 값에 따라 일기들이 필터에 따라 바뀌어야 한다

sort 함수는 원본 배열 자체를 정렬시킴 -> 깊은 복사를 해서 사용하자

const copyList = JSON.parse(JSON.stringify(diaryList))

stringify -> 배열인 diaryList 를 문자열로 바꿔줌 -> parse -> 다시 복호화 시켜줌

filter 값에 따른 필터링이 달라지기 때문에 함수 새로 작성

filterCallBack 에 item 을 전달 받았을 때 필터가 좋음일 때 감정점수가 3 이하인 경우 / 아닐 경우 3 보다 클 경우를 반환

filteredList 는 누른 값에 따른 필터링 실행시켜 준다 -> 전부라면 그대로 반환, 아니라면 필터를 적용 (copyList.filter((emotion) => filterCallBack(emotion)) 가 참인 경우만 반환

출처 한입리액트

1. 상태 관리 세팅하기 프로젝트 전반적으로 사용될 일기 데이터 state 관리 로직 작성하기

2. 프로젝트 state context 세팅하기 일기 데이터 state를 공급할 context를 생성하고 provider로 공급하기

3. 프로젝트 dispatch context 세팅하기 일기 데이터 state의 dispatch 함수들을 공급할 context를 생성하고 provider로 공급하기

상태 관리 세팅하기

[emotion.js]

일기 관리 스테이트를 작성하자

1. useReducer 함수 로직을 작성하고 reducer 함수와 일단 빈 배열을 전달해주자

const [data,dispatch] = useReducer(reducer,[])

2. 다음으로 reducer 함수를 작성해보자

3. 리듀서에 맞춰 dispatch 함수를 만들어보자

dataId 를 useRef 로 0을 입력함으로써 데이터 아이디로 사용

onCREATE 작성시 date 까지 받는 이유는 언제 작성했는지까지 받을것이기 때문 onRemove 는 targetId 를 받아와 어떤 아이디의 일기를 삭제할 것인지 결정 onEdit targetId, content, data, emotion 다 받아와야 한다 -> 수정할 것이기 때문

state Context 세팅하기

만든 data state 를 컴포넌트 전역에 공급해보자

export const DiaryStateContext = React.createContext()

컴포넌트 전체를 provider 로 감싸주고 value 는 data 를 제공

dispatch Context 세팅하기

만든 함수들을 공급해주자

export const DiaryDispatchContext = React.createContext()

Provider 로 감싸주고 value 는 만든 함수들을 제공 (onCreate, onEdit, onRemove);

출처 한입리액트

1. Path Variables (useParams)

• 몇번째 일기로 이동하고 싶을 때 -> /diary/:id
• diary에서 -> 몇번째 아이디를 넣기 위해선느 뒤에 / :id 를 작성하여 값을 전달하겠다 선언
• path variable (id) 객체를 useParams에 전달해준다

2. Query String (useSearchParams)

• 예시 : /edit?id=10&mode=dark (?이후 모든 문자가 query string 이다)

const [searchParmas, setSearchParmas] = useSearchParams();

• searchParams를 사용하면 아이디 값을 가져올 수 있다 const id = searchParmas.get('id'); 위의 예시에서 id 값으로 10이 출력된다

• searchPamas, setSearchParams는 배열을 반환한다 첫번째 반환 인덱스 = get을 통해 쿼리스트링을 꺼내 쓸 수도 있다

• setSearchParmas = useState 처럼 searchParams 변경시킬수도 있다! ( = 쿼리스트링을 바꿀 수 있다)

3. Page Moving (useNavigate)

• useNavigate 는 페이지를 이동시킬 수 있는 함수를 반환
• 함수를 navigate로 받고 인자로 경로를 적어주면 해당 경로 페이지로 이동시켜준다
• 뒤로가기려면 navigate(-1) 로 작성해주면 된다

출처 한입리액트

context API

모든 데이터를 가지고 있는 컴포넌트가 Provider 라는 공급자에게 데이터를 넘겨준다 공급자는 자식 뿐만 아니라 자손까지 데이터를 직접 전달할 수 있다 (props 전달 필요 없다!!)

사용하기 위해서는

1. context 생성 const MyContext = React.createContext(defaultValue);
2. context provider 를 통한 데이터 공급

   <MyContext.Provider value={전달하고자 하는 값}>
   {자식 컴포넌트들}
   </MyContext.Provider>

[simple.js]

export const DiaryStateContext = React.createContext();

공급자를 만들고 데이터를 공급해보자 simple 컴포넌트가 리턴하고 있는 최상위에 provider를 작성 value={data}

[DiaryList.js]

이제는 데이터를 더이상 프롭으로 받지않고 context에서 공급받으면 된다

context에서 데이터를 받아오기 위해서는 useContext 훅을 사용해야 한다

useContext에는 한가지 인자를 전달해야 한다 (값을 꺼내고 싶은 context - DiaryContext - simple.js에 있는 <- import 해야함)

DiaryList 는 사실 Props drilling 이 일어나고 있지는 않았다, 한 단계만 내려오면 됐기 때문에

반면 onRemove,onEdit같은 상태변화 함수에도 사용해보자

단순히 value prop으로 데이터 뿐만 아니라 함수도 내려보내면 될거같지만,,

안된다!!!

provider도 컴포넌트이기 때문에 prop이 바뀌면 재생성된다 -> 밑에 있는 컴포넌트도 모두 재생성되면서 그동안의 최적화가 다 풀리게 된다

context 하나 더 만들기!!

dispatch 함수 전용으로 DiaryStateContext 아래에 자식요소로 추가해주자

export const DiaryDispatchContext = React.createContext();

onRemove, onCreate, onEdit 함수를 묶어서 전달해주자

const memoizedDispatches = useMemo(()=>{
    return {onCreate, onRemove, onEdit}
    } ,[]) 

useMemo를 사용하는 이유 -> memo사용하지 않는 경우 Simple 컴포넌트가 재생성될 때 이또한 재생성 됨 -> 의존성 배열은 빈배열로 재생성되지 않게

value로 전달해준 다음 props으로 전달하였던 모든 함수들을 지워준다

[DiaryEditor.js]

이제 props를 전달받았었던 파일로 이동하여 useContext 훅을 사용하여 simple.js 에서 만들었던 context를 가지고와 사용면 된다!

출처 한입리액트

사용하면 상태변화 로직을 분리할 수 있기 때문에 컴포넌트를 간결하게 작성 가능하다

컴포넌트 바깥에서 작성하며 switch 케이스 문법 사용한다

사용법

0번째 인덱스인 count = 스테이트다 (useState에서 사용했던 것 처럼 {count} 이렇게 사용 가능)

첫번째 인덱스인 dispatch = 상태를 변화시키는 액션을 발생시키는 함수이다

useReducer 함수 호출 시 reducer 꼭 전달해야함!! (dispatch 되어 액션이 발생한 것을 reducer 함수가 처리해준다)

두번째로 전달하는 인자 (여기서 1)는 counter 스테이트의 초기값이다

정리

useReducer을 이용해서 counter 스테이트를 만들고

초기값(여기서는 1)이 할당된다

초기값을 바꿔주고 싶으면 상태변화 함수인 dispatch를 호출한다

상태변화 처리 함수인 reducer가 액션 타입에 따른 처리를 한다 -> counter 스테이트 업데이트

dispatch 함수 호출 시 객체(액션 객체, type 프로퍼티가 들어있다)를 리듀서 함수에 전달됨

reducer 함수

첫번째 인자 = 현재 가장 최신의 인자

두번째 인자 = dispatch 호출할때 전달되었던 액션 객체를 전달받는다

전달받은 액션타입을 토대로 케이스에 따른 스테이트가 바뀐다

보통 가장 복잡한 상태 로직을 갖고 있는 것 = 부모 컴포넌트 (여기서는 Simple.js)이다

[simple.js]

const [data, dispatch] = useReducer(reducer, []) 위처럼 작성하여 useReducer을 사용해보자

우선 simple.js 에서 데이터 스테이트에 어떠한 액션이 존재할 수 있는지 탐색해야한다

그리고 setData가 했었던 역할을 reducer / dispatch로 나눠주자

getData 함수에서 initData를 setData에 넘겨주었다

dispatch({type:"INIT"}) -> 액션 타입은 'INIT' -> 데이터 초기화하는 작업, data:initData

reducer는 액션 객체를 받는다 -> tpye:'INIT' -> 필요한 데이터는 initData다

이제 reducer 함수에서 INIT 타입 액션을 받았을 때 스테이트 변화 시켜주는 코드를 작성하자

왜 Action.data를 반환해줄까?

getData 함수에서 dispatch를 일으켰을때 타입 : init이고 초기화 : data:initData로 했기 때문에

reducer에서 받았을 때 액션 객체에서 data 프로퍼티를 꺼내서 그 값을 반환해주어 새로운 스테이트가 된다

onCreate

바로 dispatch를 작성해보자

    dispatch({
      type: "CREATE",
      data: {
        author,
        content,
        emotion,
        id: dataId.current,
      },
    });

원래 있던 작성날짜는 reducer 함수에서 만들어줄것

case "CREATE":{
      const created_date = new Date().getTime();
      const newItem = {
        ...action.data,
        created_date
      }
      return [newItem, ...state]
    }

onRemove

targetId 만 전달해주어 reducer 함수가 삭제해서 새로운 스테이트를 반환하도록 해주자

onEdit

edit 타입의 액션이 발생했을 때 targetId + newContent를 전달받는다

기존 스테이트에서 map을 통해 targetId와 일치하는 요소를 찾아주어 content : newContent로 수정해주고 나머지 요소는 그대로 돌려준다

reducer 함수

출처 한입리액트

일기 아이템 하나만 삭제해도 나머지 일기들이 모두 재렌더링이 되고있다

오늘은 다이어리 아이템에 초점을 맞춰 최적화를 진행해보자!

프롭으로 받고 있는 것 중 두가지 (onEdit, onRemove)는 함수, 나머지는 데이터다

데이터 중 내용인 Content 를 제외하고는 모두 변할 수 없는 데이터다

오늘의 최적화 : onEdit, onRemove

최적화의 시작은 React.memo로 컴포넌트를 묶어주는것이다!

React.memo(DiaryItem)

그리고 언제나 그랬듯 useEffect로 어떤 아이템들이 재렌더링이 일어나고 있는지 확인해보자

onCreate, onRemove -> 데이터 스테이트가 변하면 재생성 될 수 밖에 없는 함수이다

부모 컴포넌트인 Simple.js로 가서 저번에 했던것과 마찬가지로 onCreate, onRemove 함수에 최적화를 시켜보자

onRemove -> setData() <-에 함수형으로 업데이트 하도록 지시해야한다, 의존성 배열은 빈값

파라미터로 전달되는 data는 최신 데이터를 전달해야 한다 (함수형 업데이트 인자 부분에 데이터를 사용하자)

onEdit도 마찬가지로 함수형 업데이트 실행!

최적화 되어야 할 부분을 어떻게 찾지? React development tools > components 탭 > 렌더할때 하이라이트 기능 켜기 > 어디서 변화가 일어나는지 찾기 쉽다 ! 오늘의 최적화 : 일기를 하나 삭제했을 때 > 일기 작성 컴포넌트도 깜빡임 (그럴 필요가 전~혀 없는데??)

렌더링은 언제 일어날까?

• 본인이 가진 스테이트가 변경될 때
• 자신이 받은 프롭이 변경될 때
• 부모가 리랜더링 되었을 때

일기를 작성하여 저장하는데 작성 컴포넌트가 왜 리렌더링 될까?? 그것은 바로 작성 컴포넌트에서 받고 있는 onCreate 함수 때문!

[DiaryEditor.js] 코드가 긴 전체 컴포넌트를 React.memo로 감쌀 경우 -> export default 하는 부분을 전체 감싸주는 것도 가능! export default React.memo(DiaryEditor)

[Simple.js]

onCreate 함수는 일기 저장시 데이터에 아이템 추가하는 역할을 한다

[DiaryEditior.js] 에서 useEffect로 컴포넌트가 언제 렌더되는지 확인해보자 총 두번 발생하는 것을 확인할 수 있다 (왜?? 부모컴포넌트 -> 초기 데이터 스테이트 초기값이 빈값인 상태로 처음 랜더링이 일어나고 (빈배열상태) -> getData 하여 값을 가져오면 데이터 스테이트가 한번 더 바뀌게 된다

그렇다면 그냥 onCreate 함수를 react.memo로 감싸면 되는 것 아닌가?!?!

아니다!!! onCreate 함수가 참조하는 것은 비원시 타입으로 얕은 비교를 함으로 react.memo로 할 수 없다!

oncreate 함수를 react.memo로 감싸게 된다면 만들어질때마다 리렌더 될 수 밖에 없다! simple 컴포넌트가 재생성될때마다 리렌더링 계속 될 것이다!

-> oncreate 함수가 재생성 안되어야! 에디터 컴포넌트 리렌더 막을 수 있으며 최적화가 가능하다 !!!

그럼 어떻게 하지?? useMemo (함수가 반환하는 값을 다시 사용할 수 있도록 의존성 배열을 기준으로) 를 사용해볼까??

사용하면 안된다!!! 함수 반환이 아니라 값을 반환하기 때문이다

우리가 원하는 것은? oncreate 함수 그잡채를 반환하는 것이지 값이 아니다!

-> useCallback이 답이다! (메모이제이션된 콜백을 반환한다,,,의존성 배열 값이 변하지 않으면 첫번째 인자로 전달한 콜백함수를 재사용 할 수 있도록 도와준다)

[Simple.js]

onCreate 함수를 useCallback으로 감싸보자 (일단은 의존성 배열은 빈값으로)

일기를 작성해보면 있엇던 데이터들이 없어지고 만든 일기 하나만 남는다

왜냐하면 의존성배열에 아무값도 없어서 그런 것이다 맨 처음에 oncreate 함수가 만들어지는 것은 빈 배열을 기준으로 처음 만들어진다

그렇다면 의존성 배열에 data 를 넣어볼까??

그래도 안된다! 이렇게 작성하면 우리가 원하는대로 작동하지 않는다!

우리는 데이터 스테이트가 변해도 재생성되지 않기를 바라는 것이다

재생성되지 않으면서 최신값을 어떠케 참조하지?? 함수형 업데이트를 활용하자!!!

setData (()=>{}) 콜백함수를 전달해보자 ((data) => [newItem, ...data]) 상태변화 함수에 함수를 전달하는 것 = 함수형 업데이트 (의존성 배열을 비워놔도 인자를 참고하여 최신 데이터 참조한다)

이로써 일기를 작성할 때 작성 컴포넌트가 재렌더링 되는 것을 막을 수 있었다

정리해보자면

1. 최적화를 위해 어떠한 기능을 수행하는 데 있어 불필요한 렌더링이 발생하는 부분이 있는지 확인해보자 (React Development tools)

2. 불필요한 재렌더링을 유발하는 원인을 찾는다

3. 값이라면 useMemo / 함수 그 자체를 반환해야 하는 경우 useCallback 으로 감싸준다

깃허브 코드 한입크기로 잘라먹는 리액트

promise를 더 가독성 좋게 만들어준다

async function hello(){
    return 'hello async';
}

결과로 Promise{pending}이 출력됨 -> .then 사용가능한 것을 알 수 있다

hello().then((res) => {
  console.log(res);
});

결과는 hello async가 출력됨

await

function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function helloAsync() {
  // return delay(3000).then(() => {
  //   return "hello Async";
  // });
  await delay(3000);
  return "hello async";
}

async function main() {
  const res = await helloAsync();
  console.log(res);
}

main();

await 을 비동기함수 호출 앞에 붙이면 비동기 함수가 동기처럼 사용 가능

비동기 작업이 가질 수 있는 3가지 상태

1. pending (대기 상태) - 현재 작업이 진행중 or 시작도 못하는 상태 pending - resolve (해결) - fulfilled
2. fulfilled (성공) - 비동기 작업이 정상적으로 완료 됨 pending - reject (거부) - rejected
3. rejected (실패) - 어떠한 이유로 실패함

ex) 콜백을 통해서 비동기 처리하기

function isPositive(number){
    setTimeout(() => {
        if(typeof number === 'number'){
            //성공 -> resolve
            resolve(number >= 0 ? "양수" : "음수");
        } else{
            //실패 -> reject
            reject('주어진 값이 숫자형 값이 아닙니다');
        }
    }, 2000);
}

isPositive(
    10,
    (res)=>{
        console.log('성공적으로 수행함 : ', res
     },
     (err)=>{
         console.log('실패함:', err)
     }
);

성공적으로 수행함 : 양수

function isPositiveP(number) {
    //비동기 작업을 실행하는 함수 = executor
    const executor = (resolve, reject) => {
        setTimeout(() => {
               if(typeof number === 'number'){
                //성공 -> resolve
                resolve(number >= 0 ? "양수" : "음수");
             } else{
                //실패 -> reject
                reject('주어진 값이 숫자형 값이 아닙니다');
             }
         }, 2000);
    };
    //isPositiveP에서 executor 실행하기
    //비동기작업 자체인 프라미스를 저장할 상수를 만들고 new 키워드로 프라미스 객체를 생성(실질적인 실행자 함수 executor 을 넘겨줌)
    const asyncTask = new Promise(executor)
    return asyncTask;
    //isPositiveP의 반환값이 Promise로 변함
}

const res = isPositiveP(101);
//res라는 상수가 반환받은 promise 객체를 통해서 resolve/reject의 결과값을 아무데서나 사용 가능

res
    .then((res)=>{
        console.log('작업성공: ',res);
     })
    .catch((err)=>{
        console.log('작업실패 :', err);
     });

작업 성공 : 양수 resolve에서 전달한 양수라는 값이 콜백함수에 들어온 것을 확인 가능 reject -> catch에서 받을 수 있음

function taskA(a, b) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a + b;
      resolve(res);
    }, 3000);
  });
}

function taskB(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a * 2;
      resolve(res);
    }, 1000);
  });
}

function taskC(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a * -1;
      resolve(res);
    }, 2000);
  });
}

// taskA(5, 1).then((a_res) => {
//   console.log(a_res);
//   taskB(a_res).then((b_res) => {
//     console.log(b_res);
//     taskC(b_res).then((c_res) => {
//       console.log(c_res);
//     });
//   });
// });

taskA(5, 1)
  .then((a_res) => {
    console.log(a_res);
    return taskB(a_res);
  })
  .then((b_res) => {
    console.log(b_res);
    return taskC(b_res);
  })
  .then((c_res) => {
    console.log(c_res);
  });

• 자바스크립트는 코드가 작성된 순서대로 작업을 처리한다
• 이전 작업을 진행 중일 때는 다음 작업을 수행하지 않고 기다린다
• 먼저 작성된 코드를 다 실행하고 나서 뒤에 작성된 코드를 실행한다
• 연산과정을 하는 일꾼 = 스레드 (코드 한줄한줄 실행하는)

• 동기 방식의 처리

단점

• 동기적 처리는 하나의 작업이 너무 오래 걸리게 되면 하나의 작업이 종료될 때까지 뒤에 작업이 멈춰있기 때문에 전반적인 흐름이 느려진다

멀티스레드

• 코드를 실행하는 일꾼(스레드)을 여러 개 사용하는 방식으로 작업의 분할이 가능하다
• 다만 자바스크립트는 싱글스레드 방식이다!!

비동기 작업 (동기 방식 단점의 극복)

• 여러개의 작업을 동시에 실행시킨다
• 먼저 작성된 코드의 결과를 기다리지 않고 다음 코드를 바로 실행한다
• 하나의 작업이 스레들르 점유하지 않는, 블로킹하지 않는 방식 (=논블로킹 방식)
• 작업의 결과 확인 -> 콜백 함수를 넣어준다

Heap & Call Stack

• 자바스크립트 엔진은 힙과 콜스텍으로 구성되어 있다
• 힙 (변수/상수를 저장하는 메모리)
• 콜스택 (작성한 코드를 실행하는)

콜백지옥

• 비동기 처리의 결과를 또다른 비동기 결과로 이용하는 로직
• 해결방법 -> Promise 객체

[components > Counter.js]

import { useSelector, useDispatch} from "react-redux";

const Counter = () => {
  const dispatch = useDispatch();

  const counter = useSelector((state) => state.counter.counter);
  const show = useSelector((state) => state.counter.showCounter);

  const incrementHandler = () => {
 dispatch({ type: "increment" });
  };

  const increaseHandler = () => {
    dispatch({ type: "decrement" });
  };

  const decrementHandler = () => {
    dispatch(counterActions.decrement());
  };

  const toggleCounterHandler = () => {
    dispatch(counterActions.toggleCounter());
  };

  return (
    <main className={classes.counter}>
      <h1>Redux Counter</h1>
      {show && <div className={classes.value}>{counter}</div>}
      <div>
        <button onClick={incrementHandler}>Increment</button>
        <button onClick={increaseHandler}>Increase by 5</button>
        <button onClick={decrementHandler}>Decrement</button>
      </div>
      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </main>
  );
};

export default Counter;

• 스토어에 액션을 보내기 위해서 -> useDispatch
• 액션은 유형 속성이 있는 객체이므로 액션을 보내기 위해서 dispatch({ type: '' }) 의 형식으로 보내며 type의 값은 스토어에서 사용하는 식별자 중 하나

[components > Counter.js]

class Counter extends Component {
  incrementHandler() {
    this.props.increment();
  }
  decrementHandler() {
    this.props.decrement();
  }
  toggleCounterHandler() {}
  render() {
    return (
      <main className={classes.counter}>
        <h1>Redux Counter</h1>
        <div className={classes.value}>{this.props.counter}</div>
        <div>
          <button onClick={this.incrementHandler.bind(this)}>Increment</button>
          <button onClick={this.decrementHandler.bind(this)}>Decrement</button>
        </div>
        <button onClick={this.toggleCounterHandler}>Toggle Counter</button>
      </main>
    );
  }
}

//useSelector
//리덕스 스테이트를 받음 -> 객체를 리턴함 (키는 프롭으로 받은것, 값은 리덕스 상태에 들어가는 로직 )
const mapStateToProps = (state) => {
  return {
    counter: state.counter,
  };
};

//usedispatch와 같음, dispatch 함수를 프롭에 저장
const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: "increment" }),
    decrement: () => dispatch({ type: "decrement" }),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

• 커넥트를 export -> 새 함수를 반환함 , 리턴함수에 counter 보냄
• 커넥트 함수를 실행 -> 새 함수를 리턴 -> 리턴을 실행 (counter을 여기에 보냄)
• 연결하기 위해서 실행할때 뭔가 보냄 -> 변수가 있어야 한다(2개 함수)
• 첫번째 = 리덕스 상태를 전달(prop) 받아서 맵한다 -> 컴포넌트에 받아질 것

[store > index.js]

import { createStore } from "redux";

const counterReducer = (state = { counter: 0 }, action) => {
  if (action.type === "increment") {
    return {
      counter: state.counter + 1,
    };
  }
  if (action.type === "decrement") {
    return {
      counter: state.counter - 1,
    };
  }
  return state;
};

const store = createStore(counterReducer);
export default store;

• 리액트 앱과 리덕스 스토어와 연결 -> 앱의 컴포넌트가 액션 발송하고 들을 수 있도록
• 하나뿐인 스통러르 제공하면 되는데, 여기서 제공이란 무엇일까?

[src > index.js]

import { Provider } from 'react-redux';
import store from './store/index';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Provider store={store}><App/></Provider>);

• 다양한 컴포넌트 / 앱 전체에서 스토어에 접근해야 한다면 최상위에서 Provider 로 감싸주어야 한다
• 감싸주기만 한다고 어떤 스토어에 접근할 수 있는지를 알려주는 것이 아니다 -> 하나의 저장소만 있지만 다른 파일에 저장되어 있기 때문에 import 해와야 한다
• 모든 컴포넌트들이 저장소에 접근할 수 있게 되며 데이터 받기 / 구독 설정 / 액션 발송도 가능하다!

[components > counter.js] counter 값을 출력하기 위해 리덕스 저장소와 그 안에 있는 데이터에 접근해야 한다

import { useSelector } from 'react-redux';

const Counter = () => {
    const counter = useSelector(state => state.counter);

    return (
        <div>{counter}</div>
        );
}

*useSelector

1. 저장소가 관리하는 상태부분을 우리가 자동으로 선택할 수 있다 ( 상태 객체 전체에서 일부분만 쉽게 떼어내기 편함)
2. 사용할 때 react-redux가 해당 컴포넌트를 위해 리덕스 저장소에 자동 구독 설정해준다 (저장소 데이터가 변경될 때마다 업데이트 -> 최신 데이터를 받는다)

*클래스 기반 컴포넌트 -> connect 사용

• useSelector에 함수 넘겨줘야 한다 -> 그 함수는 react-redux 가 실행 -> 실행될 때 리덕스 상태, 관리된 데이터를 함수에 넣고 필요한 상태 부분을 받게 된다
• 우리가 저장소에서 추출할 어떤 데이터인지를 결정할 것이다

서드파티 패키지를 가져오기 위해서 위처럼 사용

 const store = redux.createStore();

• 스토어를 만들고 상수에 저장
• 저장소는 데이터를 관리해야 함 -> 리듀서 함수에 의해 결정 (리듀서 함수가 새로운 상태 스냅샷을 생성할 것이기 때문에)
• 리듀서는 액션이 도착할 때마다 새로운 상태를 내뱉어야 함
• 초기실행 시 초기 상태를 뱉어냄

const counterReducer = (state = { counter: 0 }, action) => {
  return {
    counter: state.counter + 1,

  };
  //기존의 상태를 바꿀 새로운 스테이트를 반환
};

• state : 기존상태, counter : 저장된 기존의 값
• 이후 createStore에 넘겨주자
• 리듀서는 항상 2개의 파라미터를 받는다 (기존의 상태 / 액션) -> 어떤 출력을 반환해야 한다 (새로운 상태 객체)
• 그러므로 리듀서 함수는 순수한 함수여야 한다 (함수 안에는 부수적인 효과도 없어야 한다)

const store = redux.createStore(counterReducer);

• 어떤 리듀서가 그 저장소를 변경하는지 저장소가 알아야 하기 때문
• 저장소를 구독할 누군가 필요 + 발송할 수 있는 액션도 필요

const counterSubscriber = () => {
  store.getState();
  //getState()는 createStore()로 저장된 저장소에서 사용할 수 있는 메서드
  //구독함수는 상태가 변경될 때마다 트리거 된다
  //트리거 되면 getState() 메소드로 변경돈 후의 최신 상태를 받을 수 있음
  const latestState = store.getState();
  console.log(latestState);
};

• 이제 리덕스가 이 구독함수를 인식 + 상태가 변경될 때마다 실행하라고 알려줘야함 저장소 -> subscribe 메소드 호출

store.subscribe(counterSubscriber);

함수를 실행하지 않고 가르키기만 한다 리듀서와 구독함수를 모두 리덕스가 실행하기 때문

• 해당 상태로 실행하게 되면 Undefined가 출력 (counter) -> 기존 상태가 없기 때문에 -> state에 기본값을 주어야함, 안주면 가정된다
• state 기본값은 설정 후 다음에 실행될 때 기존 상태가 있게 되므로 기본값은 사용되지 않는다
• state = {counter : 0}
• 변경 후 실행 -> 실행은 되지만 출력된 값이 없다 <- 액션 발송을 안했기 때문이다

  store.dispatch({ type: "increment" });

• dispatch() 액션 발송 메소드
• 액션 = 자바스크립트 객체 -> 식별자 역할을 하는 타입 프로퍼티를 가진 고유한 문자열 사용!

커스텀 훅은 데이터가 아닌 로직을 공유한다 search / Ingredients 두 컴포넌트에서 모두 사용되는 로직을 공유하도록 만듦 하나의 컴포넌트에서 요청을 보낼 때 다른 컴포넌트에서는 아무일도 일어나지 않음 (ex. ingredients 에서 요청을 보낼 때 search 에서는 x) -> 컴포넌트간에 스테이트 관련 로직을 공유하는 것 코드

#443 선택한 아이템 삭제하기

const removeIngredientHandler = (ingredientId) => {
  setUserIngredients((prevIngredients) => 
       prevIngredients.filter(
           (ingredient) => ingredient.id !== ingredientId
        )
     );
}

전의 값을 가지고 와 조건에 부합하지 않으면 버린다 -> 해당 값들로 업데이트 해주기

const query =
      enteredFilter.length === 0
        ? ""
        : `?orderBy="title"&equalTo="${enteredFilter}"`;
    fetch(
      "API주소" + query
    )

firbase에서 필터기능을 제공해주기 때문에 위와 같이 쓸 수 있다

#447 useCallback

  const filteredIngredientsHandler = useCallback((filteredIngredients) => {
    setUserIngredients(filteredIngredients);
  }, []);

캐싱되어 다시 렌더링이 되더라도 값이 남아있도록 해준다

https://github.com/facebook/react/issues/10231#issuecomment-316644950

console.log(name); // prints name state, e.g. 'Manu' setName('Max'); console.log(name); // ??? what gets printed? 'Max'? name 상태에 setName('Max'); 다음에 엑세스하면 새로운 값(예: 'Max') 이 나올것 같지만 사실 그렇지 않습니다. 명심하세요. 새 상태 값은 다음 구성 요소 렌더링 주기에서만 사용할 수 있습니다. (setName() 호출 시 스케줄됨).

reducer -> 여러개의 입력을 받아 하나의 결과를 반환하는 함수 useReducer -> 어떤 식으로 상태를 변경할 건지 정의할 수 있게 해준다