React useState 업데이트 함수의 비밀: 최신 상태를 참조하는 마법 (디버깅으로 더 쉽게!)

React useState 업데이트 함수의 비밀: 최신 상태를 참조하는 마법 (디버깅으로 더 쉽게!)React에서 가장 많이 쓰이는 훅 중 하나인 useState! 그 안에는 업데이트 함수라는 게 존재하는데요, 오늘은 이 업데이트 함수를 useState의 내부 작동 원리 관점에서 깊이 파헤쳐 보겠습니다. 특히, React 소스 코드 분석과 디버깅을 통해 좀 더 쉽고 확실하게 이해해 보도록 하죠! 들어가기 전에: useState 업데이트, 왜 다르게 동작할까?문자열 타입의 state가 있다고 가정하고, 현재 문자열에 새로운 문자를 추가하는 함수를 만들어 보겠습니다.const [inputString, setInputString] = useState(""); 아래의 경우, 둘 다 같은 결과("A")가 나올 텐..

• format_list_bulleted Javascript
• · 2025. 1. 22.
• textsms

React 19 주요 기능 가볍게 살펴보기

안녕하세요! React 19가 공식적으로 출시되었고 안정화되었습니다. 이번 글에서는 React 19의 주요 기능과 개선 사항을 소개하겠습니다. 이 내용은 깊이 있는 분석보다는 친절한 개요에 가깝습니다. 따라서 새로운 기능과 개선 사항에 대한 감을 잡을 수 있을 것입니다. 먼저, React 19의 주요 추가 기능 중 하나는 '액션'이라는 개념입니다. 액션은 데이터 변화를 처리하기 위해 전달할 수 있는 함수입니다. 예를 들어, 사용자의 이름을 API 호출로 업데이트하는 경우, 액션을 사용하여 로딩 상태, 에러, 그리고 낙관적인 업데이트를 수동으로 관리하지 않고 처리할 수 있습니다. 이전 버전에서는 여러 상태 호출을 처리해야 했지만, 액션을 사용하면 비동기 전환을 자동으로 처리할 수 있습니다. 또한, 액션을 ..

• format_list_bulleted Javascript
• · 2024. 12. 21.
• textsms

React의 Render Props 패턴을 활용한 컴포넌트 디자인

React의 Render Props 패턴을 활용한 컴포넌트 디자인React 컴포넌트 디자인 패턴 중 하나인 Render Props 패턴에 대해 알아보겠습니다. 공통 부분을 자식 컴포넌트에서 횡단적으로 사용하는 기법으로 소개되고 있지만, 익숙하지 않은 분들이 많을 것 같습니다. 헤드리스 UI 라이브러리인 React Aria를 접하면서 Render Props가 활용되고 있는 것을 보고, 이를 기반으로 정리하였습니다. Render Props 란Render Props로 구현된 컴포넌트는 React Element를 반환하는 함수를 prop으로 가집니다.const ComponentWithRenderProp = ({ render }) => { return render();};// 호출 부분 Render Prop} ..

• format_list_bulleted Javascript
• · 2024. 11. 29.
• textsms

React에서 콜백을 활용한 컴포넌트 분리 이해하기

React에서 콜백을 활용한 컴포넌트 분리 이해하기React를 사용하다 보면, 컴포넌트를 어떻게 나누고 서로 소통할지 고민하게 됩니다. 특히, 부모 컴포넌트와 자식 컴포넌트 간의 상태 관리와 데이터 흐름은 중요한 주제입니다. 이번 글에서는 콜백(callback)을 활용하여 컴포넌트를 더 깔끔하고 재사용 가능하게 분리하는 방법을 초보자도 쉽게 이해할 수 있도록 자세히 설명하겠습니다. 예제 시나리오우선, 간단한 예제를 통해 설명을 시작해보겠습니다. 온보딩(가입 안내) 과정을 단계별로 표시하는 컴포넌트를 만든다고 가정해보겠습니다. 온보딩 과정은 다음과 같은 세 단계로 이루어져 있습니다:환영 인사 단계 (WelcomeStep)서비스 약관 동의 단계 (TermsOfServiceStep)완료 단계 (Complete..

• format_list_bulleted Javascript
• · 2024. 9. 21.
• textsms

Next.js: 풀스택 개발의 미래를 위한 선택? 장점과 단점, 그리고 적절한 활용 방안

React 기반의 풀스택 프레임워크인 Next.js는 최근 개발자들 사이에서 뜨거운 관심을 받고 있습니다. 특히, 개발 생산성 향상에 대한 기대가 높지만, 모든 개발 환경에 적합한 만능 해결책은 아닙니다. 이 글에서는 Next.js의 핵심 기능과 장점, 그리고 개발자들이 겪는 어려움과 한계를 짚어보고, 다양한 프로젝트 유형에 맞는 적절한 활용 방안을 제시하고자 합니다. Next.js가 풀스택 개발 생산성을 높이는 이유Next.js는 기존 React 개발 방식에 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API Routes, 파일 기반 라우팅 등 풀스택 개발에 필요한 다양한 기능을 제공합니다. 이를 통해 개발자들은 다음과 같은 이점을 얻을 수 있습니다.개발 속도 향상: Next.js는 기본..

• format_list_bulleted Javascript
• · 2024. 8. 31.
• textsms

TypeScript의 고급 타입 시스템과 React Hooks 활용법

TypeScript는 JavaScript에 강력한 타입 시스템을 도입하여 코드의 품질과 가독성을 크게 향상시킬 수 있습니다. 이 글에서는 TypeScript의 주요 고급 타입 시스템과 React Hooks를 사용하는 방법에 대해 자세히 설명하겠습니다. 이러한 기능을 사용하면 더욱 견고하고 유지보수하기 쉬운 코드를 작성할 수 있습니다. 교차 타입 (Intersection Types)교차 타입이란?교차 타입은 여러 개의 타입을 하나로 결합하여, 객체가 그 모든 타입의 속성을 가지도록 보장하는 방법을 제공합니다. 이를 통해 다중 상속과 유사한 효과를 얻을 수 있습니다.interface Person { name: string; age: number;}interface Employee { empl..

• format_list_bulleted Javascript
• · 2024. 8. 24.
• textsms