framework_library/react14 컴포넌트의 유형 컴포넌트를 볼때 눈에 뜨는 게 값전달 하는 props 인데 그럼 컴포넌트를 정의할 때 pops의 기반인지 아닌지가 중요한가? props를 받는 컴포넌트 (pops는 데이터 표현이 핵심) 1️⃣ 먼저 “props 기반 컴포넌트”가 뭔지 정확히 하자네 말이 맞다.이건:외부에서 값이 주어지고그 값에 따라 결과가 달라지고내부는 비교적 중립적인입력(props) → 출력(UI) 구조다.이런 컴포넌트를 보통:Presentational ComponentDumb ComponentPure Component (개념적으로)라고 부른다.2️⃣ 그럼 props 기반이 “아닌” 컴포넌트는 뭐냐🔥 핵심 결론“외부 입력 없이 스스로 결정하는 컴포넌트”이런 애들이 있다. 꽤 많다.3️⃣ props가 거의 없는 컴포넌트들1️⃣ 상태.. 2026. 1. 23. 코드디벨럽3 그럼 이 App에서 Redux가 필요한 순간은 언제인가— “편해서”가 아니라 “안 쓰면 틀려지는 순간”지금 구조를 보면 솔직히 말해 Redux는 아직 필요 없다.Zustand + 로컬 상태로도 충분히 예측 가능하고 안정적이다.그럼에도 불구하고 Redux가 등장해야 하는 분기점은 명확하다.아래는 **이 App 코드 기준으로 “여기부터는 Redux를 고민해야 한다”**는 실제 트리거들이다.1️⃣ 상태가 “UI 편의”를 넘어 업무 규칙이 되는 순간현재 상태 (Redux 불필요)탭 열림/닫힘메뉴 선택팝업 표시로그인 여부이건 전부 UI 상태다.Redux 필요 신호 ①“이 상태가 바뀌는 순서가업무 규칙으로 중요해졌다”예시 (지금 코드에서 확장될 경우)1. 메뉴 접근2. 권한 확인3. 승인 상태 조회4. 승인 안 됐.. 2026. 1. 11. 코드디벨럽2 4좋아. 그럼 이제 **이 App을 기준으로“Zustand를 쓴다면 어디까지, 어떻게 쓰는 게 최소·정답인가”**를 보자.목표는 명확하다.❌ 구조를 갈아엎지 않는다⭕ 전역으로 빼야 할 것만 딱 분리한다1️⃣ Zustand로 빼는 “최소 단위”는 이것뿐이다다시 한 번 못 박자.이 App에서 Zustand로 빼는 게 의미 있는 건 딱 이것뿐이다.✔ 인증 상태 (auth)- userInfo- nickname- isAuthenticated (파생)- login / logout 책임그 외:openTabs ❌alert ❌tabletMenuOpen ❌👉 절대 같이 넣지 않는다2️⃣ auth store의 역할 정의 (아주 중요)Zustand store를 만들기 전에역할을 문장으로 고정한다.Auth Store는“사용자.. 2026. 1. 10. 코드 디벨럽 좋다. 이제 **“무엇을 전역으로 빼도 되는가 / 절대 빼면 안 되는가”**를지금 이 App 코드 기준으로 아주 냉정하게 가르자.원칙 → 적용 → 결론 순서로 간다.기준부터 다시 고정 (짧게)전역으로 빼도 되는 상태는 모두를 만족해야 한다.여러 페이지에서 동시에 필요화면 전환 후에도 유지 가치가 있음누가 바꿔도 의미가 동일앱의 동작 규칙에 영향이 중 하나라도 아니면 전역 후보 탈락이다.✅ 전역으로 빼면 “좋은 후보”1️⃣ userInfo, nickname (인증 정보) const [userInfo, setUserInfo] = useState(...)const [nickname, setNickname] = useState(...)왜 전역 후보인가모든 화면에서 필요 (헤더, 모바일, 권한 체크)페이지 이동해.. 2026. 1. 10. React 소스 적용 4좋다.이 소스는 지금까지 우리가 정리한 React 사고방식이 거의 그대로 구현된 예제다.아래에서는 **“이 코드가 실제로 어떻게 살아 움직이는지”**를렌더링 → 상태 → 라우팅 → 전역/로컬 책임 관점에서 차근차근 해부한다.0️⃣ 이 App 컴포넌트의 정체부터먼저 한 문장으로 정의하자.이 App 컴포넌트는“인증 상태를 기준으로전체 앱의 레이아웃과 라우팅을 결정하는 최상위 오케스트레이터”다UI를 많이 그리지 않는다대신 결정만 한다로그인인가?모바일인가?PC인가?공용 화면인가?보호된 화면인가?👉 전형적인 Root / Shell 컴포넌트 역할1️⃣ 최초 진입 시: 렌더링이 어떻게 시작되는가① App 함수 실행 (렌더링) export default function App({ isMobile }) { ... }.. 2026. 1. 10. Redux는 왜 아직도 쓰이는가 Redux는 왜 아직도 쓰이는가— 과설계처럼 보여도, 어떤 순간에는 대체제가 없는 이유Zustand까지 이해했다면 이런 생각이 든다.“이 정도면 Redux는 필요 없지 않나?”대부분의 UI 중심 앱에서는 맞는 말이다.그런데도 Redux는 여전히 쓰인다.이유는 관성도, 유행도 아니다. 문제의 성질 때문이다.1️⃣ Redux는 “상태 저장 도구”가 아니다이 문장부터 고쳐야 한다.❌ Redux = 전역 상태 관리 라이브러리⭕ Redux = 상태 흐름을 설계하는 아키텍처Redux가 강제하는 건 딱 세 가지다.1. 상태는 하나의 트리다2. 상태 변경은 액션으로만 일어난다3. 변경 규칙은 순수 함수(reducer)로 정의된다이 세 가지가 불편함의 원인이자,Redux가 필요한 이유 그 자체다.2️⃣ Redux가 빛나.. 2026. 1. 10. 이전 1 2 3 다음
