목차
- 신입 개발자와 리액트 마크 서버 대화 분위기
- 상태 관리(useState 객체 vs 개별 상태, useReducer)
- 구글 잔지바 시스템(Zanzibar) 소개와 경험담
- 바닐라 익스트랙트 CSS에 관한 의견
- zustand 스토어와 localStorage 상태 동기화 문제
- JSX 조건부 렌더링에 대한 새로운 접근법
- 타입스크립트 문법과 React 컴포넌트에서의 변수 추론 어려움
- 개발 문화와 업무 속 에피소드
Zanzibar #zustand #localStorage #JSX #TypeScript #상태관리 #개발문화
1. 신입 개발자와 리액트 마크 서버 대화 분위기
- 신입 개발자가 리액트 마크 서버에 합류하며 화기애애한 분위기가 형성됨.
- 삼전(삼성전자) 주가 이슈, 혈당 수치 등 가벼운 일상 대화도 섞임.
- 개발자들 간 유쾌한 농담과 서로를 응원하는 모습이 돋보임.
2. 상태 관리(useState 객체 vs 개별 상태, useReducer)
핵심
- 상태를 한 객체에 묶어서 관리하는 방법과 각 상태를 개별 useState로 관리하는 방법간 성능 차이와 가독성 문제 토론
- 여러 상태를 한꺼번에 관리할 때는 리듀서(useReducer)를 사용하는 편이 편리하고 관리가 쉬움
설명
- useState: 간단한 상태를 선언할 때 좋지만, 상태가 많아지면 코드가 난잡해짐.
- 객체로 상태 관리: 관련 상태를 객체로 함께 묶어 관리 가능하지만, 상태 변경 시 불필요한 리렌더링 이슈가 발생할 수 있음.
- useReducer: 상태 업데이트 로직을 하나로 모아 관리할 수 있어 복잡한 상태를 효율적으로 다룰 수 있음.
의견
- 상태가 많을 때는 개별 상태보다는 useReducer를 추천함.
- 가독성과 유지보수가 좋아지고, 명확한 액션을 통해 버그를 줄일 수 있음.
3. 구글 잔지바 시스템(Zanzibar) 소개와 경험담
핵심
- 잔지바(Zanzibar)는 구글의 글로벌 일관성 권한 관리 시스템임.
- 대규모 분산 환경에서 권한을 빠르고 일관되게 관리하는 기술적 해결책임.
설명
- 오픈소스 프로젝트로도 일부 구현돼 있으나 규모가 커질수록 비용이 발생할 수 있음.
- 권한 관리 시스템을 직접 구현하는 것은 어려우며, 신뢰성과 확장성을 보장하기 위해 검증된 시스템이나 서비스 이용 권장.
의견
- 권한 관련 대규모 시스템 설계 시 잔지바와 같은 중앙집중형 권한 시스템 검토 필요함.
4. 바닐라 익스트랙트 CSS에 관한 의견
- CSS를 직접 관리하는 바닐라 익스트랙트(css-in-js와 달리 정적 CSS 관리) 활용 여부 질문
- 개발자들 사이에서 도입 여부에 대해 의견이 갈림
- 초보자라면 경험 차원에서 써보는 걸 추천함.
5. zustand 스토어와 localStorage 상태 동기화 문제
문제
- zustand 전역 상태에서 localStorage.getItem('isCompleted') === 'true'로 값을 초기화했는데 실제 값과 콘솔 출력이 다름
- 로컬스토리지 값이 비동기적으로 읽히는지, 상태 업데이트가 비동기인지 헷갈림
해결팁
- localStorage API는 동기적이므로 읽는 건 바로 됨
- 문제는 React 상태 업데이트가 비동기적으로 일어나 console.log 시점과 실제 값이 달라 보이는 것
- 상태를 정확히 언제, 어디서 업데이트하는지 코드 전체 흐름을 점검해야 함
- useEffect 의존성 배열에 상태가 잘 들어갔는지 확인하고, 상태 초기화 로직은 컴포넌트 초기화 시 한 번만 수행되도록 하자.
6. JSX 조건부 렌더링에 대한 새로운 접근법
핵심
- JSX 사이에 if 문을 직접 삽입하지 못하므로, 조건부 렌더링을 위한 별도의 유틸 컴포넌트(예: <If condition={}>)를 만듦
- 조건 만족 시에만 내부 컴포넌트나 콘텐츠를 렌더링하는 방식 구현
설명
- React에서 조건부 렌더링은 주로 삼항연산자(condition ? <A /> : <B />)나 논리연산자(&&)를 사용함
- 별도의 <If> 컴포넌트를 활용하면 가독성이 좋아지고, 공통 로직 분리에도 도움이 됨
의견
- 팀 내 표준이나 코드 스타일에 맞춰 적절히 사용하면 좋음
- 타입스크립트와 함께 쓰면 오류 검증에도 유리
7. 타입스크립트 문법과 React 컴포넌트에서의 변수 추론 어려움
- 타입스크립트는 변수의 타입을 자동으로 추론하지만 React 컴포넌트와 결합 시 복잡해지는 경우 많음.
- 특히 조건부 렌더링, union 타입 관리 등에서 이해가 어려울 수 있음.
- 경험 많은 개발자라도 남의 컴포넌트를 분석하고 활용하는 데 시간이 걸리므로 주의 필요.
8. 개발 문화와 업무 속 에피소드
- 신입과 선배 간 소규모 농담과 격려가 활발, 화기애애한 분위기
- "리소토 100인분" 농담이나 혈당 관련 이슈 등 현실적인 이야기 공유
- 기술적 이슈만큼이나 인간적인 소통도 중요한 부분임
면접팁⚡
- 상태 관리 방법 비교 질문 시, useState 개별 선언 vs 객체 상태 관리 vs useReducer 차이점을 명확히 말할 수 있어야 함
- 조건부 렌더링 방법 질문에는 기본 JSX 패턴과 더 나아가 <If> 같은 커스텀 컴포넌트 활용법도 예시로 들면 좋음
- 권한 관리 시스템 이해를 위해 구글 Zanzibar 개념 정도는 간략히 숙지해두면 전문성 어필 가능
링크🔗
#React#useState#useReducer#Zanzibar#zustand#localStorage#JSX#TypeScript#상태관리#개발문화