반응형 웹개발/ReactJS12 [React] useReducer hook에 대해 araboza 오늘은 ReactJS에서 복잡한 상태 로직을 관리하기 위해 쓰는 useReducer 훅에 대해서 알아보겠슴다.1. 그전에! Javascript에서 나오는 Reduce 개념을 먼저 알아봅시다본격적으로 useReducer hook에 대해 알아보기전에, Javascript에서 나오는 이름이 비슷한 reduce 메서드에 대해 알아봅시다.reduce 메서드는 배열을 순회하면서 누적값(acc)을 계속 업데이트해서 하나의 결과값을 만들어내는 함수인데요. 배열의 모든 요소를 하나로 합쳐, 돈을 차곡차곡 모으는 저금통이라고 생각하시면 편한데요.array.reduce(callbackFn, initialValue);reduce 함수의 기본적인 인자 구성은 위와 같은데요. 누적 계산을 수행하는 콜백 함수(필수)와 누적값.. 2025. 6. 13. [React] React 함수형 컴포넌트의 생명주기에 대해 araboza. 안녕하세요! 오늘은 함수형 컴포넌트의 생명주기(life cycle)을 따라가며, 그들이 언제 태어나고(마운트), 성장하고(업데이트), 그리고 사라지는지(언마운트)에 대해 알아보겠습니다.🚀 1. 컴포넌트의 탄생: 마운트 (Mounting)컴포넌트가 처음으로 세상에 나와 웹 페이지(DOM)에 삽입되는 과정을 '마운트'라고 부릅니다. 마치 연극에서 배우가 무대에 처음 등장하는 순간과 같은데요.어떤 일이 일어나나요?초기 렌더링: React는 컴포넌트 함수를 호출하여 초기 state를 설정하고, props를 받아 첫 번째 UI(JSX)를 만듭니다.화면 등장: React가 이 UI를 실제 웹 브라우저 화면에 그려 보여줍니다. 이제 사용자가 컴포넌트를 볼 수 있고 상호작용할 수 있게 됩니다.초기 설정 필요: 컴포넌.. 2025. 6. 11. [React] React에서 불변성이 뭘까? 오늘은 React 라이브러리에서 특히 중요한 상태 불변성(Immutability)이라는 개념을 알아볼까하는데요. 상태 불변성이 왜 중요한지, 그리고 어떻게 불변성을 지킬 수 있는지, 마지막으로 이 과정을 마법처럼 쉽게 만들어주는 라이브러리 Immer에 대해서도 알아보겠습니다.1. 상태 불변성이란? 상태 불변성은 말 그대로 데이터가 한 번 생성되면 변경할 수 없는 성질을 의미합니다. 즉, 불변성이란 한 번 생성된 값이나 객체를 수정하지 않고, 변경이 필요할 때는 새로운 값을 만들어내는 성질을 의미합니다. 즉, 기존 상태를 직접 변경하지 않고, 항상 새로운 객체나 배열을 만들어 상태를 업데이트하는 것이죠. 1)원시 타입의 불변성숫자, 문자열, 불리언 같은 원시 타입은 본래 불변합니다. 이들은 값을 직접 .. 2025. 6. 9. [React] 단방향 바인딩 vs 양방향 바인딩 오늘은 React를 공부하다가 나오는 '단방향 바인딩'의 개념을 '양방향 바인딩'과 비교해서 알아보도록 하겠습니다. 데이터 바인딩(Data Binding)이란?그전에 데이터 바인딩이 뭔지 알아봅시다. 프론트엔드 개발에서 데이터 바인딩은 애플리케이션의 데이터(Model)와 UI(View)를 연결하는 과정을 의미합니다. 즉, 데이터가 변경될 때 UI가 자동으로 업데이트되거나, UI에서의 사용자 입력이 데이터에 자동으로 반영되도록 하는 메커니즘입니다. 단방향 데이터 바인딩(One-way Data Binding)이란?1.1 개념 단방향 바인딩은 데이터가 한 방향(주로 부모 → 자식)으로만 흐르는 구조입니다. 즉, 상태(state)나 데이터가 변경되면 UI가 갱신되지만, UI에서 직접적으로 데이터를 변경할 수.. 2025. 6. 4. [React] React의 가상 DOM 작동 방식 React로 프론트엔드 개발을 하다 보면 자주 듣게 되는 단어 중에 가상 DOM(Virtual DOM)이 있는데요.가상 DOM은 무엇이고, React는 왜 굳이 가상 DOM이라는 걸 쓰고, 어떤 식으로 작동하는 걸까요?이번 글에서는 최대한 쉽게, 가상 DOM의 작동방식에 대해서 정리해볼까하는데요. 세 줄 요약 먼저 하고, 하나씩 내용 살펴보겠습니다.1)React는 상태나 프롭스 변경 시 새로운 가상 DOM을 만들고 기존 가상 DOM과 비교한다2)변경된 내용만 실제 DOM에 반영한다 3)이전 가상 DOM을 새로운 가상 DOM으로 교체하여 다음 업데이트 사이클을 준비합니다.DOM이란?가상 DOM이 뭔지 살펴보기전에 먼저 DOM에 대해서 정리하고 넘어가봅시다.웹 개발에서 DOM (Document Object .. 2025. 6. 4. [React] JSX 알아보기 JSX란?JSX(JavaScript XML)는 JavaScript의 확장 문법입니다. XML과 매우 비슷하게 생겼으며, 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환되어 적용됩니다.React 라이브러리를 사용해서 웹 개발을 할 때, JSX 문법을 사용하면 더 직관적이고 편하게 작업을 할 수 있는데요.설명만 해서는 어떤 구조인지 왜 쓰는지 잘 이해가 안되죠?어떻게 편한지 한번 간단한 예시로 살펴봅시다. JSX를 왜 쓸까?JSX 없이 순수하게 JavaScript로만 React 컴퍼넌트를 만드려면 다음과 같이 만들 수 있습니다.function Greeting({ name }) {return React.createElem.. 2025. 1. 29. 이전 1 2 다음 728x90 반응형
