반응형 ▼ 코딩 공부하기/▼▼ 프론트엔드9 [React] 아직도 컴포넌트 하나에 다 넣으세요? (Presentational & Container 패턴) React로 개발하다 보면 컴포넌트 하나에 데이터를 가져오는 로직(Fetch)과 화면을 그리는 코드(UI)가 뒤섞여 300~500줄이 넘어가는 경험, 다들 있으시죠?이렇게 코드가 섞이면 수정하기도 어렵고, 다른 곳에서 재사용하기도 힘듭니다. 이 문제를 해결하기 위한 가장 클래식하고 강력한 해결책, 바로 Presentational & Container 패턴입니다. 오늘은 이 패턴을 통해 '똑똑한 녀석'과 '보여주는 녀석'을 나누는 방법을 7살 눈높이 설명과 함께 알아봅니다.목차Container 컴포넌트란? (똑똑한 녀석)Presentational 컴포넌트란? (보여주는 녀석)7살도 이해하는 설명: 쉐프와 웨이터실무 코드 예시 (Before & After)# 0. 패턴의 핵심 개념 (The Concept).. 2026. 1. 24. 프론트엔드 취업 치트키: 렌더링 방식 3대장 장단점 및 실무 코드(CSR, SSR, SSG) 프론트엔드 개발자 면접에서 빠지지 않고 등장하는 단골 질문,"CSR, SSR, SSG의 차이는 무엇인가요?" 단순히 면접용 암기가 아니라, 실제 서비스를 기획하고 성능을 최적화하려면이 렌더링 방식들의 차이를 명확히 이해해야 합니다. 오늘은 React나 Next.js를 다루는 개발자라면 반드시 알아야 할웹 렌더링 3대장(CSR, SSR, SSG)을7살도 이해할 수 있는 쉬운 비유와 실무 코드 예시로 완벽하게 정리해 드립니다.목차CSR (Client-Side Rendering): 밀키트SSR (Server-Side Rendering): 식당 주문SSG (Static Site Generation): 편의점 도시락한눈에 보는 비교 및 요약1. CSR (Client-Side Rendering)기본 개념브라우저(C.. 2026. 1. 18. 💻 React Key의 중요성과 생명주기, DB 정규화 한 번에 이해하기 (feat. 왕초보 위클리 페이퍼 #7) 안녕하세요! 개발자 꿈나무 엠디노입니다.현재 '웹개발 풀스택' 과정을 훈련하고 있습니다. 이번 주차 위클리 페이퍼 주제는 리액트의 효율적인 렌더링을 돕는 Key, 데이터 설계의 기본인 DB 정규화,그리고 컴포넌트의 일생을 다루는 생명주기(Life Cycle)입니다. "리액트 리스트에는 왜 꼭 고유한 Key가 필요할까?""데이터베이스를 쪼개는 정규화, 실무에선 어떻게 할까?""클래스형과 함수형의 생명주기는 어떻게 매칭될까?" 기본부터 실무 활용까지, 7살 아이도 이해할 수 있는 쉬운 비유와 함께 정리해 보았습니다. 💻 이전 포스팅 글은 아래 글을 참고해주세요!💻 React 컴포넌트 차이와 성능 최적화 Hook 정복 (feat. 왕초보 위클리 페이퍼 #6)1. React Key: 스마트한 업데이트를.. 2026. 1. 9. 이전 1 2 3 다음 반응형