** 수업 내용 외에 줌 채팅의 질문 + 팁 공유 내용 포함
마지막 Q&A 세션은 오프더레코드가 많아서 생략

지역변수 vs. 전역변수

state를 어떻게 관리할까?

state = 변수(variable)

• 스코프 (어디까지 유효한가)
• 생명주기 (선언부터 가비지 컬렉팅될 때까지)
• 네임스페이스 충돌
  • 예: var 범위 - window 전체 / let - 블록 스코프
    • let의 경우 let + 동일 이름으로 한 번 더 선언하면 기존 동일한 네임과 충돌

해당 변수를 어디서 사용하는가?

• 해당 컴포넌트에서만 사용하면 전역 대신 로컬 컴포넌트에만 선언하는 게 좋다

전역 상태가 필요한 이유

예전: container - presenter 방식

• container
  • 데이터 관련한 모든 걸 들고 있음
• presenter
  • 화면에 보여주기만 하는 역할
• 전역 관리 목적
  • props drilling 이슈 방지
    = 필요 없는 컴포넌트를 state가 거치게 하지 않음
• Flux 패턴 + Redux
  • 자식에게 한 번 넘기는 것 정도는 부모에서 props로 전달
  • 두 단계 이상 넘어가면 전역 관리
• 예: 카드 컴포넌트가 하나인데 기획 변경으로 이 카드를 다른 데서도 쓰게 됨
  • 스타일만 놔두고 값을 바꿔야 함
  • 전역에 두면 한번에 넘겨줄 수 있다
    • 뷰가 더 나뉘어도 데이터 관리 로직은 동일해짐
    • 유지 보수성 증가

Context API

• context API의 Provider에 넘겨준 특정 props만 해당 provider 내에서 사용 가능
  • 원래 consumer를 이용해서 props 사용
  • hook이 나오면서 useContext로 대체
• 단점
  • 비즈니스 로직이 복잡해지는 경우 여러 개의 provider 필요
  • 한 provider에서 설정할 것들이 많음
  • context는 렌더링 효율이 떨어질 수 있음 (이론상)
    • context 안에 있는 건 무조건 리렌더링하기 때문에 (예: 페이지 제목)

개발 팁: useMemo 유의

• memo는 웬만하면 안 쓰는 게 좋다
  • 대규모 + 자주 업데이트가 일어나는 게 아니라면
  • memo보다는 캐시를 많이 씀
  • 참고: Stop Using UseMemo Now🔗

Redux 쓸 때

dispatch의 type에 일반 문자열 외에 (TS 경우)

이넘을 쓰면 Order.getRestaurant 식으로 꺼내 쓸 수 있음

type과 interface 차이

타입이 string이 아니라 ‘delivery’ | ‘pickup’ 두 가지 밖에 없다면

이 유니온 조합은 type으로 설정하는 게 좋음 (인터페이스 쓰면 중괄호 넣어야 되니까)

인터페이스는 객체에 사용

개발 팁

브라우저에서 json 예쁘게 보는 법

• 화면 왼쪽 아래 {} 클릭!

Recoil

• 요즘 다 react-query 쓰다 보니
  • saga 등의 비동기 전역 처리를 위한 redux 장점이 많이 사라짐
• redux 단점
  • provider 여러 개 + store 설정 ⇒ boilerplate가 많음
• 큰 회사들은 요즘 recoil을 많이 씀
  • recoil 단점: atom이 매우 많아질 수 있다

recoil & react-query 조합으로 쓰는 경우 많음

• recoil — 클라 상태 관리
• react-query — 서버 상태 관리

카카오: redux → react-query 전환기🔗

Recoil 기본 개념

atom = state
selector = reducer

장점

• 구조 간단
• context API보다 렌더링 효율이 좋음 (⇒ 정확히 특정 atom만 변경)

컴포넌트에서 atom을 조작할 수도 있는데 selelctor로 조작하는 이유?

• 상태 관리를 전역으로 하기 위해
• 다른 데서도 atom을 쓸 경우 최신 atom을 쓸 수 있게
  • 한 군데에서 변경하면 변경 값이 다른 곳에도 바로 적용됨

atom을 useSetRecoilState로 변경하는 것과 selector로 변경하는 것의 차이?

• selector : atom을 직접 변경 x
  • atom 값을 가져와서 새로운 값을 리턴하는 역할
  • 즉, 기존에 있는 값을 가지고 연산 (새로운 변수를 만드는 것과 유사)
• useSetRecoilState: atom을 직접 변경

atomFamily를 쓰면 props를 받을 수 있음

• 파라미터를 받아서 유사한 atom 반환
• 동일한 상태를 약간 context에 따라 다르게 사용할 수 있는 느낌
• atom을 생성하는 생성자 함수

개발 팁

axios 쓸 때 반환 값 타입 꼭 설정해주기 (제네릭)

• 결과 값인 data가 타입이 설정되어 나와서 편함

React-query

• 캐시된 데이터의 상태가 중요
  • fresh: 방금 불러온 가장 최신의 값 (데이터 페칭 x)
  • stale: 시간이 지나서 오래된 값 (이때부터 데이터 페칭 o)
  • inactive: 더 이상 안 쓰는 값

staleTime vs. cacheTime

• staleTime (초기값: 0)
  • fresh한 데이터가 stale이 되는 시점
    • stale 되면 새로운 페치 시도
• cacheTime (초기값: 5분)
  • staleTime이 지났을 때 cacheTime이 남아 있으면
  • 바로 서버에 요청하는 게 아니라 캐시된 데이터를 사용
  • 예: staleTime 5분, cacheTime 10분
    • 5분에서 10분 사이일 때 stale 됐다고 해서 바로 서버에 요청 x
    • cacheTime 전이므로 기존에 저장된 캐시를 사용
      ⇒ 불필요한 API 요청 감소

infinity로 설정해두면
새로고침을 하지 않는 이상 계속 같은 값을 씀

자주 새로 업데이트되는 값은 stale, cache타임 잘 설정해주기

만약에 다른 페이지에 같은 데이터 2개가 있는데
페이지 이동이 많으면 stale time 지정으로 요청이 과다해지는 것을 막을 수 있다.

cacheTime은 inActive 상태(언마운트?)에서 적용되는 값이라 따로 생각하면 편함

staleTime이 지났으면 서버로부터 데이터를 새로 갱신하고
Inactive 상태가 됐을 때 cacheTime 동안까지 데이터를 유지하고 이후 제거된다.

invalidateQueries vs. refetch

• invalidateQueries
  • put으로 수정된 경우 자동으로 get 가져오는 거
  • 쿼리키들에게 해당된 값을 stale하게 만듦
• refetch
  • 더 명시적으로 다시 요청하는 거
  • 그냥 페칭을 새로 함

실제로 tkdodo가 자기는 refetch 전혀 안 쓴다고 했죠
웬만하면 새로 가져오지 말고 기존에 캐시된 거 꺼내 쓰기

useQuery에서 onSuccess, onError 없어졌음

낙관적 업데이트

• 빠른 좋아요 기능 구현 react-query optimistic update🔗

아하 모먼트: 최근에 배운 새로운 기술이나 도구

• es6는 신기술이 아님 (모던이 아님)
  • 8년 전에 나옴
  • es5와 비교하기 위한 명칭 정도

토스: 프론트엔드를 잘 하려고 하는 조직
토스 컨퍼런스 많이 보기 (유튜브에 ‘토스 슬래시’ 검색)

• 토스 | SLASH 23 - 퍼널: 쏟아지는 페이지 한 방에 관리하기🔗

새로운 기술 배우는 방법: 여러 IT 사이트 구독

목적: Best Practice 익히기 (코드, 개발 방법론, 컨벤션 등)

• 요즘 IT (퀄리티 good)
• 코드너리 (이메일)
• 커리어리 (강사님 글 많음)
• 프론트엔드 관련 번역하는 오픈소스 분들 구독하기
• Korean FE article (무료)
• 서핏 아티클

Chat GPT

• 단어 1대 1 번역이 아닌 ‘트랜스포머’
• 문맥을 파악해서 답변 제공
  • 질문을 최대한 구체적으로 하는 게 좋음 (문맥 제공)
  • 어떤 상황에서 이런 궁금증이 생겼는지 배경을 설명하고
    • 질문을 작성하면 답변이 좀 더 구체적으로 나옴
• 회사에서 챗 gpt 활발히 사용
  • 보안상 문제로 회사 코드를 챗 gpt에 올리지만 않으면 OK
  • 무조건 ‘복붙’하지 않으면 OK
    • 현재 gpt는 21년도 9월까지의 데이터라서
    • 부정확한 정보가 있을 수 있음

Gpt-4

• 유료 (월 20달러 - 26000원 정도)
• 코드 인터프리터 베타 기능이 생겨서 보다 정확하게 답변을 해줌
• 뤼튼을 사용하면 무료로 gpt-4를 사용할 수 있음 (관련 기사)🔗