회고

상태컴포넌트는 컴포넌트 안에서만 접근 가능한 로컬 데이터인 "상태(state)"를 가질 수 있다. 이 데이터를 다른 컴포넌트와 공유하려면 React의 단방향 데이터 흐름에 따라 두 컴포넌트 보다 상위 위치에 자리 잡은 컴포넌트로부터 속성(props)으로 전달받아야 한다. 상태 관리 전략 : 끌어올리기React 컴포넌트 로컬 데이터인 상태를 관리하는데 사용되는 가장 주요한 전략 중 하나는 상태를 끌어 올리거나 끌어 내리는 것이다. 우선은 끌어올리기에 대해 알아보자.  상태 끌어 올리기(↑) 전략 A와 C는 상태를 관리 중이고, A는 B컴포넌트와 연관된 상태 관리 중. 만약 B가 C에서 관리 중인 State에 접근할 수 있어야 하고, C의 상태가 변경될 때마다 B에서도 변경된 값을 표시해야한다면, 현재 상황..

이전 글: React 훅(Hook)의 정의와 특징훅(Hook)이란?함수형 컴포넌트에서 React의 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 함수훅의 종류React는 여러 가지 기본 훅을 제공한다. 가장 많이 사용되는 훅은 다음과 같다.useState: 상태를 관리useEffect: 부수 효과(Side Effect)를 관리useContext: Context API를 사용하여 전역 상태를 관리useReducer: 복잡한 상태 로직을 관리useState와 useEffect 설명1. useState상태를 선언하고 업데이트할 수 있게 해주는 훅상태가 변경되면 컴포넌트가 리렌더링된다.import React, { useState } from 'react';function Coun..

훅이란? 함수형 컴포넌트에서 React의 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 함수왜 훅(Hooks)이 필요했나?컴포넌트 내부에 캡슐화 된 로직은 다른 컴포넌트와 공유가 쉽지 않았다. 결국 로직을 재사용하기 위해 React 앱에서 Render Props, HOC와 같은 복잡한 패턴을 사용해야 했다. 1. 함수의 한계: 상태 관리 불가능함수는 순수한 로직을 재사용하기에 적합하지만, 상태를 내부적으로 관리할 수 없다. function Counter() { let count = 0; // 이 변수는 함수가 호출될 때마다 초기화됨 const increment = () => { count += 1; console.log(count); }; return i..

멋쟁이사자처럼 2주차 과제로 React + Vite 프로젝트 템플릿을 구성하는 과정과 유의점을 정리  1. Git Git 초기화프로젝트 버전 관리를 위한 Git 초기화git init # -b mainGit 관리 제외➕ .gitignoreGit 관리 제외 파일 - 제외 항목을 추가한다. 라인 엔딩 설정라인 엔딩(line ending): 텍스트 파일 줄의 끝을 나타내는 문자나 문자 조합 UNIX 계열에서는 \\n을 사용하지만, MS-DOS와 Windows에서는 \\r\\n을 사용Windows에서 작성한 파일을 macOS에서 열면 줄 바꿈 표시가 잘못될 수 있어, 모든 텍스트 파일의 줄 바꿈 문자를 자동 변환하도록 설정한다. ➕ .gitattributestext eol=lf 2. 에디터 구성 및 기본 메타 데..

이벤트 위임이벤트가 발생한 요소가 아니라, 부모 요소에서 이벤트를 처리하는 기법. 이벤트가 발생한 요소에 이벤트 핸들러를 설정하는 대신, 해당 이벤트가 버블링(Bubbling)되어 부모 요소에게 전달 될 때 부모 요소에서 이를 처리한다. 즉 이벤트가 부모 요소에 위임(delegation)된다.이벤트 위임의 각기 다른 2가지 사례를 통해 이벤트 위임을 알아보자. 이벤트 위임 사례 1ul 안의 특정 li박스를 클릭 했을 때 강조 적용하기 HTML 박스 박스 박스 박스 JSul.onclick = function (e) { let li = e.target.closest("li");//(1) if (!li) return; if (!ul.contains(li)..

Dom 이벤트의 흐름1. 캡처링이벤트가 하위 요소로 전파되는 단계2. 타깃 단계이벤트가 실제 타깃 요소에 전달되는 단계3. 버블링이벤트가 상위 요소로 전파되는 단계출처: JavaScript Event Flow: Bubbling, Capturing, and Delegation Decoded!를 클릭하면 이벤트가 최상위 조상에서 시작해 아래로 전파되고(캡처링 단계), 이벤트가 타깃 요소에 도착해 실행된 후(타깃 단계), 다시 위로 전파된다.(버블링 단계).Dom 이벤트 흐름의 특징캡처링 단계를 사용하는 경우는 거의 없다. 이벤트 타겟 순서는 기본적으로 버블링이다. 이전에는 이벤트 타겟 순서가 브라우저별로 달랐지만, W3C에서 표준 이벤트 실행 순서를 지정했다.타깃이 되는 가장 하위 요소부터 이벤트를 상위로..