리액트스터디

DOM은 무엇인가 > #### 요약 Document Object Model의 약자 동적 프로그래밍 언어의 연결고리

말 그대로 "한 개의 페이지로 구성된, 웹 애플리케이션!"(예를 들어, 페이지 이동시 기존페이지의 내부를 수정해서 화면을 보여준다는 의미!)클라이언트가 리소스를 잘 보관하고 있다가, 필요할 때 클라이언트에서(client side) 꺼내주렴!완전, 다른 개념!SPA는 말

(= 네트워크 내에서 통신테이터를 보낼 경로를 선택하는(정해주는) 일련의 과정)ex. 메세지를 보낼 것이다. -> 최적의 경로로 ! 누구보다 빠르게, 누구보다 가깝게 그러니깐, 라우팅은 컴포넌트의 배치를 변경하는 과정 혹은 경로를 선택하는 일련의 과정인데 ! 그 경로

리액트에서 Component(컴포넌트)는 "앱을 이루는 최소한의 단위"라고 정의할 수 있다. (그러니깐, 리액트 앱은 '컴포넌트 + 컴포넌트 + 컴포넌트 + ... + 컴포넌트'의 형태! UI를 재사용 가능한 개별적인 여러조각으로 나눈 것이 컴포넌트)👉사전적 의미:

Component는 크게 class형 컴포넌트와 함수형 component로 나뉜다 ! class 그리고 component 상속이 필수임render가 필수임props를 조회할 때 this를 사용함state(상태)를 사용함life cycle과 method를 이용클래스 컴포

class형 컴포넌트는 state와 Life Cycle의 관리가 가능하지만 컴포넌트 상태로직을 재활용하기 어렵고, this의 동작방식의 오류 가능성이 있으며 메모리 자원을 낭비한다는 단점이 있었다. 그리하여 state관리와 Life Cycle관리는 불가능하지만 메모리

🖐️자깜마안! 혹시, 시간 있어요? 시간 있으면...........hook의 탄생 설화를 먼저 보고와염(시간 없어도 먼저 읽고 오는걸 권장)\[\[\[컴포넌트의 state(상태)를 간편하게 update 할 수 있게 하는 도구 !count라는 변수를 선언 ! (변수명은

❓의문. useState로 상태 변화가 가능한데, useReducer를 굳이 사용하는 이유?👉 취지가 다름 !고객이 은행업무를 본다고 예를 들어보자. 고객은 한 명이 아니고, 또 은행의 상품도 한 가지가 아니다!모든 고객이 은행의 모든 상품 그리고 모든 업무를 직접

리액트는 여러개 컴포넌트로 구성됨 (트리형태)데이터 흐름은 상위컴포넌트(부모컴포넌트)에서 하위컴포넌트(자식컴포넌트) 즉, 위에서 아래로 데이터를 내려주는 형태최상위 컴포넌트(App)에 전달하고자 하는 state data를 두고, 그 F컴포넌트와 I컴포넌트에 데이터 값을

useEffect는

Component 함수가 렌더링 되는 과정에서, value 변수는 초기화 됨 ! 따라서 calculate 함수의 값은 변하지도(update) 않았는데 호출됨 !→ 계산값을 메모리에 저장 (Memoization) → 동일계산의 반복수행 제거 !그러니깐, useMemo는

값 대신에 함수 자체를 캐싱 (컴포넌트 렌더링 성능 최적화 → useCallback으로 컴포넌트 props가 변하지 않으면 렌더가 발생하지 않음)🔔 함수(콜백함수)를 배열형태의 함수 실행 조건값(deps)이 변경될 때까지 저장하고, 재사용(deps 값이 바뀌지 않는

React.memo는 React에서 제공하는 고차컴포넌트로보통 컴포넌트를 인자로 받아서, 고차컴포넌트(React.memo)의 prop check(prop이 변화했는지)를 통해 최적화된 컴포넌트를 반환하게 함일반적인 props 전달 과정을 확인하자 !기존값을 memoiz