React 흠냐흠냐

어찌저찌 리액트 인강 하나를 마무리했다.
남은건 응용뿐... 정리 드가자.

&& 연산자로 if 대체하기

*switch case도 맛있음

//조건문이 true 라면 흠냐흠냐
true && '흠냐흠냐';

//조건문이 false 라면 흠냐흠냐
false && '안녕';

예)
	//result가 뭐냐에 따라 실행
	{result.isLoading && '로딩중..'}
    {result.data && result.data.리액트쿼리임ㅋ}
    {result.error && '에러남'}

객체/배열 자료형 응용

코드 가독성이 매우 좋을듯하다.

let 현재상태 = '평일';

      {
        { 
           평일 : <p>1일1강 블로그 포스트</p>,
           주말 : <p>링가링가링 몰루몰루</p>,
           공휴일 : <p>내가 제일 잘놀아</p>
        }[현재상태]
      }
      

{} 뒤에 []에 key 값을 넣어 현재상태를 취한다. 크,, 변수 저장해서 써도됨

로컬/세션 스토리지

리액트는 스토리지를 많이 사용하게 될 것 같다.

//세션(브라우저 종료시 사라짐)은 로컬 자리에 써주기만 하면 됨
localStorage.setItem('키', '밸류');
localStorage.getItem('키');
localStorage.removeItem('키')

//문자만 저장할 수 있어서 JSON으로 파싱해야한다.
JSON.stringify({키:'밸류'}) //저장시
JSON.parse(변수명) //받아서 변환시

*별안간 외전 - Set = 중복불가 를 이용해 중복 값 제거하기

new Set(배열변수명) //중복제거
Array.from(배열변수명) //다시 배열로

리액트쿼리...는 맛보기 글이 있으니.. 패스
성공 실패 로딩 좋아 스테일타임 좋아 실시간 업데이트 좋아 캐싱 UX 좋아

성능향상편

lazy, Suspense 문법

const 컴포넌트명 = lazy( () => import('./컴포넌트명') )

<Suspense fallback={ <div>로딩중임</div> }>
  <컴포넌트명 />
</Suspense>

lazy 사용시 초기 렌더링이 빨라지고 해당 컴포넌트를 사용할 때 렌더링 되기 때문에 Suspense 태그로 lazy가 적용된 컴포넌트를 감싸주고 fallback 속성을 사용하면 로딩중에 보여줄 요소 설정이 가능하다.(부모 컴포넌트를 그냥 다 감싸버리면 편함)

memo는

원하는 컴포넌트를 감싸준 후 해당 컴포넌트로 전송되는 props가 변경될 경우 props끼리 비교 후 재렌더링 된다. 이외에는 뚱하게 가만히 있음

useMemo는

useEffect와 발동조건이 같다. 그리고 트리에 저장해놨다 꺼내 쓰는걸로 기억...해오 ㅎㅎ

상태변경 함수에 대한 18v automatic batching

상태변경 함수가 연달아 있을시에 마지막 함수만 실행되는데 이게 싫다면 flushSync 함수를 사용하면 된다.

useTransition 을 사용하면

let [isPending, startTransition] = useTransition()

isPending은 변수로 로딩시 true 반환한다.

startTransition은 함수로 무거운 상태변경 함수를 감싸주면 html과 같은 요소를 먼저 처리하고 감싸진 함수를 나중에 처리한다.

html이 먼저 나타나 UX 측면에 좋다. (useDeferredValue에 상태나 변수를 담으면 똑같이 늦게 처리해준다.)

*상태변경 함수는 모두 비동기적으로 처리되기 때문에 useEffect를 잘 사용해야한다.