6주차 WIL( React 숙련 주 정리 / )

useContext
react에서 context의 필요성
props를 부모-> 자식에게 넘겨줄 때 수없이 많이 깊어지고 복잡해지면서
props drilling
1 - 2 - 3 - 4 가 순서대로 있다면 굳이 2 , 3을 지나지않아도 되는 상황에서도
한 번씩 거치기 때문에 계속 깊어진다.
context API에서는 전역적으로 선언된 데이터에 접근이 가능해지면서 이런 상황을 방지한다.

context API
createContext : context 생성
Consumer : context 변화 감지
Provider : context 전달(to 하위 컴포넌트)

보내줄 부모 (1)에서 .Provider 를 써주고
받을 컴포넌트에서 해당 컴포넌트 useContext(xxContext) 를 다시 변수로
저장해주고 해당 변수의 .키값을 입력해준다.
******* 여기서 useContext는 props로 받아 오는게 절대 아니다.

주의 사항
*렌더링 문제
Provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리랜더된다;
value 부분을 신경써줘야 하는 이유이며, 이러한 단점은 메모리제이션에서 해당 키가 된다.

 

Hook 최적화
react.memo,
react.useCallback, useMemo

리랜더링이 많이 생기면 좋지않겠지

발생 조건은
컴포넌트에서 state가 바뀌었을 때
컴포넌트가 내려 받은 props가 변경되었을 때
부모 컴포넌트가 리랜더링 된 경우 자식 컴포넌트들 모두가

앞서 배운 Hook들에서는 렌더링이 자주 일어나며
이는 리렌더링 + 코스트가 발생하며 이것들을 최대한 줄여야한다
그렇기 때문에 Optimization 최적화를 해야한다.

react.memo - *컴포넌트를 캐싱 [부모 컴포넌트의 state의 변경으로 인해 props변경이 일어나지않는 한 리랜더링이 되지않음]
컴포넌트 하단에 내보내주는 export default React.memo(컴포넌트명);
이렇게 감싸주면됨 React.memo()

react.useCallback - *함수를 캐싱
랜더될때 마다 새로운 주소 값을 갖게 되어서
+ (props)를 내려줄 때 새로운 주소값을 갖게 되어서
컴포넌트 입장에서는 props가 바뀌었구나 인식하고 리랜더링을 한다.

이런 상황때문에 아예 함수자체를 메모리제이션 하는 방법을 쓰는데,
함수를 별도 메모리 제이션 : 별도 공간에 저장해놓고 변경되지 않게 막는다.

    const resetBtn = useCallback(() => {
        console.log(`${count}에서 0으로 초기화 되었습니다.`);
        setCount(0);
    }, [count]);

특정 state가 변경될 때 처음 저장한 콜백함수가 갱신되어야한다면 뒤[ ] 의존성 배열에
해당 state를 넣어야만 한다.

+ {count}가 변경될 때 만큼은 useCallback으로 다시 저장되어야 하기때문에
[ ] 의존성 배열에 state 인 count를 넣어준다

useMemo - * 값(value)을 캐싱
기존의 값이 저장될때 주소가 1234라면 리랜더링 되면서 주소값이 4958로 바뀌게(달라지게) 된다 라고 react 컴포넌트에서 인식을 한다
그렇게 때문에 useEffect가 발동을한다. <- 여기에서 사용자가
기존 배열(기존값이) 바뀌지 않았어 를 명시해주기 위해 useMemo를 사용
    const value22 = useMemo(() => heavyWork(), [ ]); 감싸주고 뒤에 의존성 배열
    console.log(value22);

해당 함수가 작동이 될 때만 갱신이 되는 (리랜더링이 되는)

하지만 남발하게된다면 오히려 성능이 악화된다; 반드시 필요한 경우에만 쓰도록

 

Redux 
  - type 과
  - payload :
    * action 객체라는 것은 action type을 payload만큼 처리하는 것이다
    * ex : payload가 3이다 . 3만큼 plus 사용

 

 

Firebase 기본 강의

서버 로직을 만들어 줄 수 있는 좋은 대안이다.
회원가입 , db, 파일 업로드, 클라우드 스터리지를 제공해주는 백엔드 서비스를 제공

구글에서 제공하는 서버리스 플랫폼

서버가 없는 개발을 가능하게 하기 때문에 백엔드에 대한 지식이 없어도
웹서비스 출시를 가능하게 하기  위해 배우는것이다.