본문 바로가기

전체 글91

Claude Code 101 최근 Anthropic의 Claude Code 101 강의를 보면서 가장 크게 느낀 건 단순히:“AI로 코딩 생산성을 올린다”수준의 이야기가 아니라는 점이었다.오히려 핵심은:“AI를 개발 워크플로우 안에 어떻게 운영체제처럼 녹여넣을 것인가”에 가까웠다.특히 Claude Code는 ChatGPT처럼 단순 질답형 도구라기보다:프로젝트를 읽고구조를 이해하고계획을 세우고코드를 수정하고테스트를 실행하고반복 작업까지 수행하는하나의 “개발 에이전트”에 가깝다.이번 글에서는 Claude Code 101 내용을 기반으로:핵심 개념개발자로서 중요한 포인트실무에 어떻게 적용할 수 있는지정리해보려고 한다.Claude Code의 핵심 철학기존 AI 사용 방식은 대부분 이렇다.질문 → 답변 예를 들면:“React Modal 코드.. 2026. 5. 10.

ReactFiberHooks.js로 이해하는 Hooks의 진짜 동작원리 React를 쓰다 보면 훅은 너무 자연스럽게 사용하게 된다.useState() useEffect() useMemo() useCallback() useReducer() ...하지만 대부분은 이 훅들이 렌더링 엔진 안에서 어떻게 동작하는지까지는 깊게 생각하지 않는다. 이번 글에서는 React 내부 구현인 packages/react-reconciler/src/ReactFiberHooks.js 파일을 기준으로 질문 중심 흐름으로 정리해보려고 한다.훅이 어디에 저장되는지상태 업데이트가 어떻게 큐잉되는지deps는 어떻게 비교되는지effect는 언제 실행되도록 예약되는지memo/callback은 어떤 방식으로 캐시되는지Hooks 규칙은 왜 존재하나요?“왜 훅은 조건문 안에서 쓰면 안 되나요?”“왜 항상 컴포넌트 최상.. 2026. 1. 13.

React는 무엇을 기준으로 이전 UI와 상태를 유지할까 React를 쓰다 보면 이런 경험을 한 번쯤 해봤을 것이다.리스트에서 항목을 추가했더니 input 값이 다른 줄로 이동했다key를 바꿨더니 state가 초기화됐다같은 컴포넌트인데 어떤 경우에는 state가 유지되고, 어떤 경우에는 날아간다렌더 함수 안에서 컴포넌트를 정의했더니 자식 컴포넌트가 계속 새로 마운트된다이 현상들은 모두 하나의 원리로 설명된다.React는 렌더링 시점마다 “이 컴포넌트가 이전 렌더의 어떤 컴포넌트와 같은 엔티티인가?”를 판단하고,그 판단 결과에 따라 기존 상태를 유지할지, 새로운 컴포넌트로 교체할지를 결정한다. 이 비교 과정이 바로 Reconciliation이다.1. Reconciliation이란 무엇인가?React에서 렌더링은 단순히 DOM을 다시 그리는 과정이 아니다.렌더 단.. 2026. 1. 13.

React 동작흐름 코드 뜯어보기 사용자 이벤트handler에서 setState/dispatchhandler 종료까지 대기(배칭)상태 큐 처리Render PhaseCommit PhaseEffect Phase동작흐름을 보다가 react 깃헙에서 코드로 해당 흐름의 근거를 찾아보자! 싶었다 이걸 소스 기준으로 매핑하면,(1~3) 이벤트 배칭 경계: react-dom-bindings의 ReactDOMUpdateBatching.js(2~4) setState/dispatch → 업데이트 객체 생성/큐잉: react-reconciler의 ReactFiberHooks.js(4~6) root에 스케줄링 → 렌더/커밋: react-reconciler의 ReactFiberWorkLoop.js(7) effect 실행(특히 useEffect/useLayout.. 2026. 1. 13.

React 상태 업데이트의 원리 React에서 상태(state) 업데이트는 단순히 값이 바뀌는 것이 아니라렌더링 시스템의 내부 큐(queue)와 스케줄링(batch) 구조를 통해 처리된다.렌더링은 다음 파이프라인으로 나뉘며, 상태 업데이트는 이 안에서 어떻게 동작하는지 이해해보려고한다. Render → Commit → Effect 핵심 개념상태 업데이트는 즉시 반영되지 않는다React는 여러 상태 업데이트를 모아서 배칭(batch) 처리한다상태 업데이트는 큐(queue)에 들어가고, 렌더 사이클에서 처리된다같은 state 값으로 업데이트하면 리렌더링을 건너뛴다 1) 상태 업데이트는 큐에 저장된다React에서 useState의 setState는 단순히 값을 덮어쓰는 함수가 아니다.공식 문서에서 state 업데이트 동작을 이렇게 설명한다:.. 2026. 1. 13.

React를 “렌더링 시스템”으로 재정의하기 Rules of React: https://react.dev/reference/rulesuseEffect: https://react.dev/reference/react/useEffectuseLayoutEffect: https://react.dev/reference/react/useLayoutEffect위 공식문서를 읽고, 렌더링에 대해서 정리해보았다. 아래 질문에 대답할 수 있다면, 이 글은 넘겨도 될것같다.“React 렌더링 파이프라인을 설명해보세요”“왜 렌더와 이펙트가 분리되어 있나요?”“컴포넌트 순수성이 왜 중요한가요?”“Hooks 규칙은 왜 존재하나요?”“useEffect는 정확히 무엇을 위한 도구인가요?” 리액트 렌더링은 단순히 “컴포넌트 실행 → DOM 반영”이 아니라,렌더(Render) → .. 2026. 1. 12.

이전 1 2 3 4 ··· 16 다음

티스토리툴바