2025-03-29

목차

1. 콜라와 점심 얘기
2. 리액트에서 모달 처리 방법(useState vs useRef)
3. 컴포넌트 폴더 구조 관리 팁
4. useRef 사용 시 주의점과 렌더링 이슈
5. React 19.1.0 최신 소식
6. 법률 관련 기업 이슈 및 퇴직증명서 문제
7. React Native와 Flutter 선택 조언
8. 에어컨 청소 및 생활 팁
9. 출퇴근과 주거 선택 기준
10. 소소한 개발자 일상 및 잡담

1. 콜라와 점심 이야기 🥤🍽️

• 개발자들 간 간단한 밥과 음료 관련 소통이 오갔음.
• 점심 메뉴로 샤부샤부, 라면, 후면 어깨 운동 같은 일상적 이야기 포함.
• 팀 분위기가 자유롭고 가벼운 잡담으로 시작됨.

2. 리액트에서 모달 처리 방법: useState vs useRef 🔄

핵심

• 모달 창의 열림/닫힘 상태를 관리하는 방법으로 useState와 useRef가 언급됨.
• useState는 리렌더링(컴포넌트 다시 그리기)을 발생시킴.
• useRef는 상태 변화가 렌더링을 발생시키지 않는 변수를 가리킴.

설명

• useState는 컴포넌트 상태를 관리하고, 값이 바뀌면 컴포넌트를 다시 렌더링함.
• useRef는 렌더링과 상관 없이 값을 유지하는 데 사용하며, DOM 요소 직접 접근 시 주로 사용됨.
• 모달의 열림 상태를 렌더링 필요 없이 처리할 때는 useRef를 활용하는 경우도 있음.
• 다만, React에서 DOM 조작을 직접 하는 것은 권장되지 않으며, 렌더링 이슈를 초래할 수 있음.

의견

• 많은 개발자들이 UI 랜더링에 영향 없는 부분에 useRef를 사용하라고 권함.
• 하지만 React 내에서는 상태 변화가 필요한 경우 useState를 사용하는 게 안전.
• 오버레이-킷 같은 라이브러리도 추천됨: Overlay Kit

3. 컴포넌트 폴더 구조 관리 팁 📁

질문

• 상위 컴포넌트 아래에 하위 컴포넌트가 많아질 때 폴더를 분리하는 게 좋은지?

답변 및 팁

• 컴포넌트가 많으면 하위 폴더로 나누어 관리하는 것이 일반적임.
• 팀 내에서 구조에 대한 합의(컨센서스)를 맞추는 것이 중요.
• 폴더를 너무 세분화할 지, 아니면 한두 개 컴포넌트는 폴더 없이 관리할 지는 상황과 팀에 따라 다름.
• 한 번만 사용되는 컴포넌트라도 코드가 너무 복잡하거나 길면 분리하는 것이 유지보수에 좋음.
• 관련 자료로 Feature-Sliced Documentation와 Storybook 활용 추천.

4. useRef 사용 시 주의점과 렌더링 이슈 ⚠️

• React 내부에서는 useRef를 남용하는 것이 권장되지 않음.
• DOM을 직접 조작할 경우 렌더링과 상태가 불일치할 수 있어 버그로 이어질 수 있음.
• 렌더링과 무관한 값 저장에만 useRef를 사용하는 것이 안전.
• 렌더링이 필요한 UI 상태 관리에는 여전히 useState 또는 다른 상태관리법이 우선.

5. React 19.1.0 최신 소식 🎉

• React 19.1.0 버전이 11시간 전에 릴리즈됨.
• 빠른 적용과 관련 블로그, 포스팅 링크가 공유되었음.
• 최신 React 환경과 새로운 기능에 관심을 가질 필요가 있음.

6. 법률 관련 기업 이슈 및 퇴직증명서 문제 🏢⚖️

• 퇴직증명서 발급을 거부하는 기업 문제 언급.
• 법적으로 퇴직 시 회사는 증명서 발급 의무가 있음.
• 미적지근한 대응 시 노동청 신고 권고.
• 관련 법률 자문 및 국세청 상담 사례가 공유됨.
• 기업과의 법적 권리 문제에 있어 법대로 대응하는 것이 속 편함.

7. React Native와 Flutter 선택 조언 📱

• React Native 앱 개발에 대해 질문이 있었음.
• Flutter 사용 권장 의견 다수, 특히 Dart 언어를 함께 공부하는 게 좋다고 언급.
• Flutter 관련 커뮤니티로 초대도 있었음.

8. 에어컨 청소 및 생활 팁 ❄️

• 에어컨 청소를 직접 하다가 고장내거나 피드백 공유.
• 전문 업체에 맡기거나 유튜브 영상 참고 권장.
• 계절마다 관리 필요성 강조됨.

9. 출퇴근과 주거 선택 기준 🚃🏘️

• 서울 vs 경기도 주거 선택 고민에 대한 의견 공유.
• 교통비, 출퇴근 시간 × 시급, 월세(대출이자) 비용을 비교하여 경제적 이득 계산 권유.
• 남는 시간에 자기개발 시간을 갖는 것도 중요한 요소로 언급.
• 방음 문제 등 주거 환경 차이도 고려해야 함.

10. 소소한 개발자 일상 및 잡담 😄

• 점심 메뉴, 운동, AI 코딩 도움 서비스 공유 등 일상 이야기.
• ai 서비스들이 코딩 오류 고치는 게 불편하다는 농담 포함.
• 개발자들 사이에서 흔히 나오는 재밌는 대화로 팀 분위기 엿볼 수 있음.

면접팁⚡

• React 상태관리(useState vs useRef) 문제:
  상태 변화에 따른 리렌더링 이해와 각각의 용도 및 적절한 사용처를 명확히 설명하는 것이 중요함.
  면접에서 모달, UI 상태 관리에 대해 질문받을 때 useState는 렌더링을 유발함을, useRef는 렌더링과 무관한 값 관리에 쓰임을 예시로 설명할 수 있어야 함.
• 컴포넌트 구조화:
  컴포넌트의 역할과 책임(SRP: Single Responsibility Principle)을 기반으로 폴더 구조를 어떻게 설계하고, 팀 협업 시 커뮤니케이션이 중요함을 강조하면 좋음.

링크🔗

• Overlay Kit (모달 라이브러리): https://overlay-kit.slash.page/ko
• Feature-Sliced Documentation (컴포넌트 구조): https://feature-sliced.github.io/documentation/kr/
• React 19.1.0 릴리즈 노트: https://github.com/facebook/react/releases/tag/v19.1.0
• AI 코딩 오류 도움 서비스: https://vibecodefixers.com/
• 에어컨 청소 참고 영상: https://youtube.com/shorts/KlR0LLH-R6k?si=8vTBzxy0EnVNc2Kd
• 개발 블로그: https://blog.naver.com/pjt3591oo/223814132934