반응형 전체 글74 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 76 (가상 DOM의 작동 방식, 컴포넌트 라이프사이클, 순수 함수와 부수 효과) 목차가상 DOM의 작동 방식컴포넌트 라이프사이클순수 함수와 부수 효과오늘 하루를 돌아보며 가상 DOM의 작동 방식가상 DOM은 실제 DOM 조작의 비효율성을 해결하기 위해 리액트가 도입한 핵심 기술이다. 실제 DOM은 변경될 때마다 전체 DOM을 다시 계산하고 그려야 해서 성능이 저하되지만, 가상 DOM은 메모리상에서 UI의 가벼운 복사본을 만들어 효율적으로 업데이트를 처리한다. 가상 DOM의 작동 원리는 다음과 같다.새로운 가상 DOM 생성: 컴포넌트의 상태(state)가 변경되면 컴포넌트가 다시 렌더링되면서 새로운 가상 DOM 트리가 만들어진다.이전 가상 DOM과 비교(Diffing): 리액트는 새로 만들어진 가상 DOM과 이전 가상 DOM을 비교하여 어떤 부분이 변경되었는지 찾아낸다.실제 DOM 업.. 2025. 8. 25. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 75 (인풋 이벤트 핸들링, 제어 vs. 비제어, 배열 상태 관리) 목차인풋 이벤트 핸들링제어 vs. 비제어배열 상태 관리오늘 하루를 돌아보며 인풋 이벤트 핸들링리액트에서 인풋 요소의 값은 컴포넌트의 상태(state)와 연결하여 관리한다. 이렇게 하면 사용자의 입력이 상태에 즉시 반영되어 UI가 동기화된다.입력과 상태 연결: input 요소의 value 속성에는 상태 값을, onInput 또는 onChange 속성에는 상태를 업데이트하는 핸들러 함수를 연결해야 한다.리액트의 onChange: 웹 표준 change 이벤트와 달리, 리액트의 onChange 이벤트는 사용자가 입력할 때마다 실시간으로 발생하여 즉시 상태를 업데이트한다. 제어 vs. 비제어인풋 요소를 상태와 연결하는 방식에 따라 제어 인풋(Controlled Input)과 비제어 인풋(Uncontrolled I.. 2025. 8. 20. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 74 (함수형 컴포넌트의 상태, 상태를 끌어올려 공유) 목차함수형 컴포넌트의 상태상태를 끌어올려 공유오늘 하루를 돌아보며 함수형 컴포넌트의 상태함수형 컴포넌트의 상태(State) 관리함수형 컴포넌트는 useState 훅을 사용하여 상태를 관리한다. useState는 배열을 반환하며, 첫 번째 값은 현재 상태 값, 두 번째 값은 상태를 업데이트하는 함수다. 배열 구조 분해 할당을 사용하면 아래와 같은 형태로 간편하게 선언할 수 있다.const [state, setState] = useState(초기값) 상태 업데이트와 렌더링상태를 업데이트하려면 setState 함수에 새로운 값을 전달해야 한다. setState가 실행되면 리액트는 해당 컴포넌트를 다시 렌더링한다. 리액트의 렌더링 과정은 다음 3단계로 이루어진다.렌더 트리거: 초기 렌더링이 일어나거나 setSt.. 2025. 8. 19. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 73 (상태가 없는 컴포넌트, 상태가 있는 컴포넌트, 리액트 훅의 등장과 변화) 목차상태가 없는(Stateless) 컴포넌트상태가 있는(Stateful) 컴포넌트리액트 훅의 등장과 변화오늘 하루를 돌아보며 상태가 없는(Stateless) 컴포넌트컴포넌트는 상태(state) 보유 여부에 따라 구분할 수 있다. 상태가 없다면 상태 없는 컴포넌트(Stateless Component) 또는 프레젠테이셔널 컴포넌트(Presentational Component)로 구분할 수 있고, 상태가 있다면 상태 있는 컴포넌트(Stateful Component) 또는 컨테이너 컴포넌트(Container Component)로 구분할 수 있다. 상태 없는(Stateless) 컴포넌트는 시각적 표현에 집중하는 컴포넌트로 스타일 정보만 포함하여 UI 화면을 렌더링하는 역할을 담당한다. 이 컴포넌트는 복잡한.. 2025. 8. 18. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 72 (리액트 빌드 환경 구성, 리액트 프로젝트 템플릿 구성) 목차리액트 빌드 환경 구성리액트 프로젝트 템플릿 구성오늘 하루를 돌아보며 리액트 빌드 환경 구성Bun 올인원 런타임 환경을 기반으로 다양한 개발 도구들을 직접 설정하고 효과적으로 활용하는 방법을 학습했다. Bun은 패키지 매니저, 번들러, 테스트 러너 등 다양한 기능을 하나의 런타임에 통합하여 복잡한 개발 환경을 간결하게 구성할 수 있도록 도와준다. Bun은 자바스크립트 실행 환경에서 Node.js보다 매우 빠른 성능을 제공한다. 만얄 Vite 빌드 도구를 선호한다면 Vite 환경에서 Bun을 사용할 수도 있다. 빌드 환경을 구성하기 위해서 React와 ReactDOM을 설치하고, JavaScript가 아닌 모듈을 불러오고, 타입 정의 파일을 설치했다. VSCode 인텔리센스를 구성하고 Prettier도.. 2025. 8. 18. 이전 1 2 3 4 5 6 7 ··· 15 다음 반응형
