[인프런 워밍업 스터디 클럽 3기 FE] 2주차 발자국

React의 등장 배경 React는 상태(state) 기반으로 UI를 효율적으로 관리하도록 설계된 라이브러리 기존 자바스크립트의 문제점- DOM을 조작하는 방식이 비효율적 - 변경이 필요할때마다 전체 DOM을 다시 그려야 함 - 전체가 아닌 일부 DOM만 변경시키고 싶으면 복잡한 로직이 필요- 상태 관리의 어려움 - 복잡한 UI에서는 DOM과 데이터의 일관성을 유지하기 어려움 - 데이터와 UI가 양방향으로 상호작용하며 예측하기 어려운 상태가 됨➡ 결과적으로 유지보수가 어렵고, 재사용성이 낮음 React의 해결책- 상태(state) 기반 UI 관리 - useState를 통해 UI가 변경될 때만 렌더링 - batching : 상태를 한번에 모아서 처리- 가상 DOM을 사용한 최소한의 업데이트 - 이전 가상돔과 현재 가상돔을 비교해 필요한 부분만 업데이트 (diff) - 불필요한 DOM 조작을 최소화하여 성능 향상- 컴포넌트 단위 개발 - UI를 작은 단위로 분리하여 재사용 가능 - 각 컴포넌트의 생명주기를 관리할 수 있음 리액트 컴포넌트 생명주기컴포넌트가 생성되고 사용되고 소멸될때까지의 일련의 과정- 마운트 -> 업데이트 -> 언마운트 - 마운트: 컴포넌트를 DOM에 삽입 - 업데이트: 컴포넌트의 props나 state가 변경될 때 발생 - 언마운트: 컴포넌트를 DOM에서 제거 클래스형 컴포넌트 - React.Component를 상속받아 사용- 생명주기별로 메서드가 있으며, 각 메서드를 오버라이드 할 수 있음 함수형 컴포넌트 - 생명주기 메서드를 직접 제공하지 않음.- 훅을 사용하여 생명주기와 유사한 기능 구현 훅(Hook)은 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있도록 해주는 React 내장 함수훅의 종류 : useEffect, useState, useMemo, useCallback특히 생명주기에 가장 직접적인 영향을 미치는 훅은 useEffect- useEffect(() => {...}, []) : componentDidMount- useEffect(() => {...}, [state]) : componentDidUpdate- useEffect(() => {{return ()=>{...};}, [state]) : componentWillUnmount 리액트 훅 useState컴포넌트의 상태(state)를 관리하는 Hook- 함수형 컴포넌트에서 상태를 관리할 수 있도록 함- 상태가 변경되면 해당 컴포넌트가 리렌더링됨- useState로 관리하는 값은 **React 내부에서 관리됨- setState를 호출하면 비동기적으로 업데이트(batch 처리) 됨 - batch 처리란? : 리액트 랜더링 최적화 기법중 하나로, 여러번의 setState()호출이 있을때, 각각 개별적으로 랜더링을 발생시키지 않고 한번만 렌더링 되도록 묶어서 처리 상태란 무엇인가?- 사용자의 응답, api 응답 등에 의해 변경되며, ui를 동적으로 변경시키는 핵심 데이터- 리액트는 useState로 상태를 내부적으로 저장하고, 이 상태가 바뀔때 컴포넌트를 리랜더링한다. 상태의 종류- 로컬상태 : 개별 컴포넌트 내부에서 관리되는 상태- 전역상태 : 여러 컴포넌트가 공유하는 상태- 서버상태 : 서버에서 가져오는 상태- UI상태 : UI관련상태 (모달이 열렸는지, 토글이 열렸는지) useState와 리액트 생명주기- 초기 렌더링 (mounting) → useState의 초기값 설정- 업데이트 (updating) → setState 호출 시 리렌더링됨- 언마운트 (unmounting) → 상태 해제 useEffect컴포넌트의 부수 효과(side effect)를 관리하는 Hook- 함수형 컴포넌트에서 컴포넌트 생명주기를 관리할때 사용됨- API 호출, 이벤트 리스너 등록, DOM 조작 등 비동기 작업을 처리할 때 사용- useEffect는 렌더링 후 실행되며, 의존성 배열(`deps`)을 통해 실행 조건을 제어 가능- 함수를 리턴할 경우, 언마운트 이후 실행됨useEffect(() => {...}); // 매 렌더링마다 실행 useEffect(() => {...}, []); // 마운트 시 1회 실행 useEffect(() => {...}, [count]); // count가 변경될 때만 실행 useEffect(() => { return () => {...}; }, []); // 언마운트 시 실행 useCallback> 함수를 메모이제이션하여 불필요한 리렌더링을 방지하는 Hook- 함수가 매번 새로 생성되는 것을 방지- React.memo()와 함께 사용하여 최적화 가능 - 상태가 변경되거나 props가 변경되면 리랜더링 발생 - 이때 props로 객체나 함수(참조형)을 넘기게 되는 경우 props는 얕은 복사를 진행하기에 매번 리랜더링을 할 수밖에 없음 이때 메모이제이션을 사용하면 불필요한 랜더링 방지 가능 useCallback과 리액트 생명주기- 컴포넌트가 마운트될 때 초기화됨- 의존성 배열이 변경되면 새로운 함수로 업데이트됨 useRef> DOM 요소에 직접 접근하거나, 값이 유지되지만 리렌더링을 유발하지 않는 변수를 관리하는 Hook- DOM 요소를 직접 조작하는 데 사용- 렌더링 간 유지되는 값을 저장할 때도 사용- 값이 변경되어도 컴포넌트가 리렌더링되지 않음 useRef와 리액트 생명주기- 컴포넌트가 마운트될 때 초기화됨- 리렌더링과 무관하게 값을 유지

[인프런 워밍업 스터디 클럽 3기 FE] 1주차 발자국

1주차 학습 정리명시적 형변환• Number() - 전달된 값을 숫자로 변환합니다. 정수, 실수 모두 지원하며, 불리언, null, 공백 등도 처리합니다. - 숫자로 변환할 수 없는 문자열(예: "123abc")은 NaN을 반환합니다.• parseInt() - 문자열을 정수로 해석합니다. 문자열의 앞부분부터 숫자를 읽어 정수로 변환합니다. - 두 번째 인수로 진법(보통 10)을 명시하는 것이 좋으며, 변환 불가능한 경우 NaN을 반환합니다.• parseFloat() - 문자열을 부동 소수점 숫자로 해석합니다. - 숫자 앞의 공백은 무시하지만, 숫자 형식이 깨지는 시점에서 파싱을 중단합니다.• String() - 전달된 값을 문자열로 변환합니다. - 객체의 경우 내부적으로 toString()을 호출하며, null과 undefined는 각각 "null", "undefined"로 변환됩니다.• Boolean() - 전달된 값을 불리언(true/false)으로 변환합니다. - 0, NaN, 빈 문자열(""), null, undefined는 false로, 그 외의 값은 true로 변환됩니다. 암시적 형변환• 문자열 결합: + 연산자가 문자열과 다른 타입의 값을 만나면 다른 타입이 문자열로 변환됩니다. (예시: "5" + 5 → "55")• 동등 비교 (==) : 비교하는 두 값의 타입이 다르면 자바스크립트가 암묵적으로 타입을 변환하여 비교합니다. • === (일치비교)는 두 값의 타입이 동일한 경우에만 true를 반환(암묵적 타입 변환 없음) • == (동등비교)는 두 값의 타입이 다르면 암묵적인 형변환을 수행• 불리언 컨텍스트: 조건문이나 논리 연산에서 값이 불리언으로 평가되어 암묵적으로 형변환됩니다.• 산술 연산: - 연산자가 숫자와 다른 타입의 값을 만나면 다른 타입이 숫자로 변환됩니다. (예시: "10" - 2 → 8) 배열, 유사 배열 객체, 이터러블배열 (Array) - Array 생성자나 배열 리터럴([])을 통해 생성된 객체 - 내장 메서드(push, pop, map, filter 등)를 사용할 수 있음 - 프로토타입 체인을 통해 다양한 기능이 제공유사 배열 객체 (Array-like Object) - 인덱스와 length 프로퍼티를 가지고 있지만, Array.prototype에 정의된 메서드를 직접 사용할 수 없는 객체 - 함수 내의 arguments 객체, DOM에서 반환되는 NodeList 등 - Array.from()이나 전개 연산자(...) 등을 사용해 실제 배열로 변환 가능이터러블 (Iterable) - [Symbol.iterator] 메서드를 가지고 있는 객체입니다. - 배열, 문자열, Map, Set 등이 이터러블이며, for...of 문 등으로 순회할 수 있습니다. - for...of 문은 [Symbol.iterator] 메서드 내 next 함수를 호출 const arrayLike = { 0: "a", 1: "b", 2: "c", length: 3 }; const realArray = Array.from(arrayLike); console.log(realArray) // 출력: ["a", "b", "c"] const iterable = { maxData: 5, [Symbol.iterator]: function() { let index = 0; const max = this.maxData; return { next: function() { return index DOM, window, Node• 자바스크립트는 다양한 환경에서 동작하며, 이때 플랫폼을 호스트라고 부름• 브라우저에서는 모든 객체의 최상위에 존재하는 window라는 루트 객체가 있음• 새로운 탭이나 창이 열릴 때 내부적으로 자동 생성됩니다.• window 객체는 DOM, BOM, JS로 구성됩니다. - DOM (문서 객체 모델) • 웹 페이지 내의 모든 콘텐츠를 객체로 나타냅니다. • 최상위 객체는 document이며, DOM의 엔트리 포인트 역할을 합니다. • document의 메서드를 통해 DOM을 선택, 추가, 삭제할 수 있습니다. - BOM (브라우저 객체 모델) • DOM과 JS를 제외하고 호스트가 제공하는 추가 객체들을 나타냅니다 (비표준). - JS (ECMAScript Core) • ECMAScript에 정의된 내장 객체와 함수들이 전역 객체(window)의 프로퍼티로 등록되어 접근 가능합니다.• 전역 변수와 함수는 window 객체의 프로퍼티로 등록되어 전역 스코프를 형성합니다. window ├── document (DOM) ├── documentElement () ├── head (document.head) └── body (document.body) └── ... (노드, 메서드 등) ├── BOM (Browser Object Model) ├── location ├── navigator ├── history ├── screen └── ... (타이머, cookies 등) ├── JavaScript (ECMAScript Core) ├── 기본 객체들 (Object, Array, Function 등) └── 내장 함수 및 프로토타입 └── 기타 Web API ├── fetch, XMLHttpRequest ├── WebSockets ├── Canvas, WebGL 등 └── ... (여러 브라우저 제공 API) 노드 타입 (총 12가지 중 자주 사용되는 4가지)• Document Node: DOM의 진입점 (document)• Element Node: HTML 태그를 나타내며, DOM 트리를 구성함• Text Node: 텍스트(새 줄, 공백 포함)를 나타냄• Comment Node: 주석을 나타내며, 화면에 표시되지는 않지만 정보 기록 및 DOM 조작 시 활용 가능 1주차 과제day1 음식 메뉴 앱day2 가위바위보 앱day3 퀴즈 앱day4 책 리스트 앱day5 깃허브 파인더 앱