소비하는 사람에서 생산하는 사람으로

리액트 19 달라진 것들 | 새로운 훅과 기능 한번에 정리해드립니다

리액트 19 달라진 것들 | 새로운 훅과 기능 한번에 정리해드립니다2026년 현재 React 최신 버전은 19.2.4입니다. React 19는 단순한 마이너 업데이트가 아닙니다. 기존에 번거롭게 처리하던 비동기 상태 관리, 폼 처리, 데이터 페칭 방식이 크게 바뀌었습니다.프론트엔드 개발자라면 반드시 알아야 할 React 19의 새로운 훅과 기능들을 실전 예제와 함께 정리해드립니다.🆕 React 19 신규 훅 한눈에 보기훅역할대체 대상useActionState비동기 액션 상태 관리useFormState (폐기)useFormStatus상위 form 상태 접근Context + props drillinguseOptimistic낙관적 UI 업데이트수동 상태 관리use비동기 리소스 읽기useEffect + us..

createPortal lets you render some children into a different part of the DOM 리액트 공식 문서에 따르면, createPortal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공한다고 되어있다. {createPortal(children, domNode, key?)} Reference createPortal(children, domNode, key?) Parameters children : 리엑트에서 랜더링 할 수 있는 모든것 (ex. JSX, ), string, number 등등 domNode : portal가 바라보는 DOM element가 들어감 key: A unique string or nu..

목차 배경 Atomic Design 문제점 결론 배경 지금까지 개발해 온 프론트 페이지들의 구조는 어떻게 보면 대부분 비슷하지만, 자세히 들여다보면 제대로 된 구조가 없어서 (스스로 정해놓은 규칙이 없어서) 손이 가는데로 개발이 된 경우가 많았습니다. 스스로 어느정도 정형화 된 패턴을 통해 규칙을 정해두면 가독성도 좋아지고 재활용성도 좋아질거라 생각했습니다. 그래서 디자인 패턴을 서치중 아토믹 디자인이 눈에 들어와 정리해 봤습니다. Atomic Design Designing Systems Atomic Design Methodology Tools of the Trade The Atomic Workflow Maintaining Design Systems 페이지를 만들때 구조화 하는 부분인, 아토믹 디자인 패..

배경 React의 다양한 CSS 사용방법 다양한 방법 비교 default CSS 내 방법 CSS-in-CSS CSS Module SASS(SCSS) CSS-in-JS Style Jsx Style Component Utilty First Tailwind 결론 1. 배경 React 에서 CSS를 사용하는 방법은 막연하게 “다양하다"고만 생각하고 있었고, 저는 가장 단순하고 직관적인 JSX 내부에 CSS를 입력하는 방법으로 사용했습니다. 반복되는 CSS는 컴포넌트화 시켜서 사용하긴 했지만, 그 프로젝트용 단발성으로 사용하고 다른 페이지(프로젝트)에서는 거의 사용되지 않았습니다. 그럼에도 크게 문제가 되지 않았던 이유는 페이지가 복잡하지 않고, 디자인의 중요도가 높지 않았기 때문입니다. 각 도메인에서 CSS F..