목차
- React.memo 제거 및 리렌더링 이슈
- React Query: Optimistic Update와 디바운스/쓰로틀링
- 타입스크립트에서 Nullable 타입과 옵셔널 체이닝 활용법
- useCallback, useEffect 의존성 관리 및 공식문서 활용 팁
- 커스텀 훅과 전역 상태 관리 - Provider 패턴과 Redux
- React Provider 패턴과 컴포넌트 래핑 전략
- JWT 토큰 저장 및 보안 이슈
- 리액트 공부 팁 및 프로젝트 시작 방법
- 다국어(i18n) 라이브러리 컨벤션
- 면접 및 개발 팁 정리
1. React.memo 제거 및 리렌더링 이슈
- React.memo를 제거해도 조건 분기해서 렌더링되는 부분은 다시 리셋됨.
- React.memo는 컴포넌트 불필요 재렌더링을 막지만 사용 시 리렌더링 흐름을 잘 이해해야 함.
- 리렌더링 이슈는 상태 변화 및 props 전달 방식을 잘 설계하는 것이 중요함.
2. React Query: Optimistic Update와 디바운스/쓰로틀링
- Optimistic Update란?
서버 응답을 기다리지 않고 클라이언트 캐시를 먼저 업데이트하여 UI를 즉각적으로 반영하는 패턴. - 좋아요 버튼 구현 시 useMutation과 useQueryClient 활용하여 캐시 업데이트 및 rollback 처리 가능함.
- 디바운스(debounce): 어떤 이벤트가 연속으로 발생할 때 마지막 이벤트만 실행함.
- 쓰로틀(throttle): 이벤트 발생 간격을 제어하여 일정 시간마다 한 번만 실행함.
- 좋아요 연속 클릭 처리에는 쓰로틀링이 더 적합함.
- UI 즉각 반영은 onMutate에서 처리하고, 서버 요청만 디바운스/쓰로틀링 하는 구조 권장.
- 버튼 자체를 쓰로틀링하여 2초에 한 번만 클릭 가능하도록 하는 단순 방법도 고려할 만함.
3. 타입스크립트에서 Nullable 타입과 옵셔널 체이닝 활용법
- 상태에 me: Me | null 처럼 nullable 타입을 주면 매번 옵셔널 체이닝(me?.status)을 사용하게 되어 코드가 지저분해질 수 있음.
- 대안: me: Me로 초기값을 빈 객체나 기본값으로 넣어 non-nullable 처리 후 추가 상태로 isAuthenticated 같은 플래그를 관리.
- 옵셔널 체이닝은 편하지만 과도할 경우 가독성이 떨어질 수 있음.
- 의존성 배열에서는 primitive 값으로 상태를 관리하는 것이 성능과 정확성을 위해 권장됨.
4. useCallback, useEffect 의존성 관리 및 공식문서 활용 팁
- useCallback과 useMemo는 재생성 시점에 따라 useEffect의 실행 여부까지 영향을 끼침.
- useEffect는 의존성 배열의 값이 변할 때만 실행됨. useCallback으로 만든 함수가 재생성되면 useEffect도 실행됨.
- 공식문서 꼼꼼히 읽고 필요한 값만 의존성 배열에 넣는 연습 필요.
- 대부분의 useMemo와 useCallback은 불필요할 수 있으니 꼭 필요한 경우에만 사용 권장.
5. 커스텀 훅과 전역 상태 관리 - Provider 패턴과 Redux
- 커스텀 훅은 범용으로 재사용하거나 앱 전역에서 한 번만 사용하는 경우 두 가지 용도가 있음.
- Dan Abramov의 권고: 커스텀 훅은 각자 독립적이어야 하며 서로 부작용을 주지 않아야 함.
- Redux나 Recoil 같은 상태관리 라이브러리는 전역 상태를 관리하고, 이를 커스텀 훅 내에서 useSelector / dispatch로 사용하는 것은 문제 없음.
- 앱 전역에서 인터넷 상태, 앱 상태, 권한 요청, 웹소켓 등 로직은 Provider 패턴을 주로 사용함.
- 고차 컴포넌트(HOC)보다 Provider 패턴이 더 현대적이며 명확한 상태 전달과 관리에 용이함.
6. React Provider 패턴과 컴포넌트 래핑 전략
- 여러 Provider를 중첩하는 구조가 복잡해질 수 있는데, ProviderBuilder 클래스를 만들어 래핑을 체인처럼 구성하는 것도 좋은 방법임.
- Provider 패턴은 context를 통해 전역 상태나 설정값을 하위 컴포넌트에 효율적으로 전달할 때 사용.
- Redux, React Query, 테마, 인증 등 여러 Provider를 계층적으로 구성 가능.
- 중복 및 과도한 중첩을 줄이기 위해 미리 래핑하는 구조가 유지보수에 도움이 됨.
7. JWT 토큰 저장 및 보안 이슈
- 액세스 토큰은 메모리에 저장하고, 리프레시 토큰은 보통 HttpOnly 쿠키에 저장하는 패턴이 보안상 안정적임.
- 모바일 앱에서 쿠키 처리 어려워 로컬스토리지/메모리 저장을 선호하는 경우도 있음.
- 토큰을 HTTP 헤더(Authorization: Bearer)에 담아 서버 요청을 처리하는 것이 일반적.
- 리프레시 토큰은 1회용으로 처리하는 설계가 보안상 권장됨.
- 각 플랫폼 특성에 맞는 저장 방법과 갱신 로직 설계가 필요함.
8. 리액트 공부 팁 및 프로젝트 시작 방법
- 공식 React 문서가 가장 신뢰도 높고 상세한 가이드 제공.
- 인프런, 유튜브 등 인강으로 기본 개념을 익히면서 GitHub 등에서 오픈 소스 프로젝트 코드를 직접 읽어보는 것도 도움이 됨.
- 사이드 프로젝트는 단순 기능부터 시작해서 점차 확장하는 방식 권장.
- TypeScript와 Next.js도 배우면 취업 및 실무에 유리함.
- GPT 같은 AI 도구는 보조 수단으로 활용하고 기본 개념과 공식문서를 중심으로 학습할 것.
9. 다국어(i18n) 라이브러리 컨벤션
- 번역 함수는 보통 짧고 사용이 간편한 t 혹은 translate 등의 명칭으로 사용.
- 예: t('닫기')처럼 간결한 호출이 일반적.
- 긴 이름은 타이핑이 불편하므로 상황에 맞춰 약칭을 사용.
- 컨벤션에 따라 팀 내에서 통일하여 사용하는 것을 추천.
10. 면접팁⚡
- 실제 운영 서비스의 코드를 그대로 면접에서 보여주면 회사 자산 침해 가능성이 있으니 주의.
- 성과는 정량적 수치(퍼센트 향상, 처리 속도 개선 등)와 함께 설명하는 것이 좋음.
- 코드보다 문제 해결 과정과 생각하는 방식을 강조하라.
- 리팩토링보다 기능 완성이 우선임을 인지하고, 면접에서도 우선순위를 이해하고 있는 태도를 보일 것.
링크🔗
- React 공식 문서 - 커스텀 훅:
https://ko.react.dev/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component - React 공식 문서 - useEffect:
https://ko.react.dev/reference/react/useEffect - React 공식 문서 - Context API:
https://ko.react.dev/learn/passing-data-deeply-with-context - OAuth 2.1 Draft:
https://datatracker.ietf.org/doc/html/draft-ietf-oauth-v2-1-11 - JWT 토큰 보안 관련 글:
https://velog.io/@ehdrms2034/Access-Token-%EC%A0%80%EC%9E%A5-%EC%9C%84%EC%B9%98%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B3%A0%EC%B0%B0 - React Compiler Beta 발표:
https://react.dev/blog/2024/10/21/react-compiler-beta-release - ProviderBuilder 예제 코드:
https://github.com/dooboolab-community/hackatalk/blob/master/client/src/utils/ComponentWrapper.tsx - React Query 공식 문서:
https://tanstack.com/query/latest - 리액트 번역 관련 블로그:
https://velog.io/@iamtaehoon/sagah
#React#ReactQuery#TypeScript#useCallback#CustomHooks#ProviderPattern#JWT#리액트공부법#상태관리#리팩토링