회고

컴포넌트 간 State 공유하기 : 끌어올리기지난 시간, 상위 컴포넌트에서 아래의 컴포넌트의 상태를 관리하기 위한 전략인 끌어올리기에 대해 간략히 설명했다. 이번에는 예시를 통해 상태를 끌어올리는 과정을 확인해보자.Accordion이 두 개의 Panel을 렌더링하는 예시AccordionPanelPanel각 Panel 컴포넌트는 콘텐츠 표시 여부를 결정하는 Boolean형 isActive 상태를 각각 가지고 있다.import { useState } from 'react';function Panel({ title, children }) { const [isActive, setIsActive] = useState(false); return ( {title} {isActive ? (..

상태컴포넌트는 컴포넌트 안에서만 접근 가능한 로컬 데이터인 "상태(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)..