React

렌더링 간에 데이터를 유지하고, 변수를 업데이트하고 컴포넌트를 다시 렌더링 하도록 하는 state setter 함수🤔 지역 변수는 렌더링 간에 유지되지 않는다. 따라서 초기 선언 값으로 렌더링 된다. 또한, 지역변수를 변경해도 렌더링이 발생하지 않는다. => 렌더링

상태 업데이트를 여러 조건에 따라 달라져야 할 때 유용한 상태관리 훅state : 현재 상태 값dispatch : 새로운 값으로 업데이트하는 함수, 리렌더링 시킨다.reducer: 상태를 업데이트하는 함수 (+ switch 문을 사용한다)initialState: 초기

context API 는 전역 상태 관리를 위한 기능이다.컴포넌트가 props를 전달하지 않아도 부모의 컴포넌트로부터 props를 받을 수 있다.❗ 값을 변경하면 해당 Context를 사용하는 모든 컴포넌트가 다시 렌더링 된다.✅ 기본 사용법

렌더링과 관계 없는 값을 관리할 때 사용한다.DOM 요소에 직접 접근하고 싶을 때, 이전 상태의 값을 기억하거나 이전 렌더링 정보를 저장할 때 사용한다.✅ 기본 사용법❗ ref.current는 이벤트 헨들러, useEffect에서 읽거나 써야 한다.

컴포넌트를 외부 시스템에 연결하고 동기화할 수 있게 하는 hook\-> 네트워크, 브라우저 DOM, 애니메이션, UI 라이브러리 위젯, React가 아닌 코드를 다루는 것이 가능하다.✅ 기본 사용법setup : Effect의 로직 함수, clean up(정리) 함수를

Perfomance Hooks 로 성능 최적화를 위해 불필요한 작업을 건너뛰는 것이다. 비용이 많이 드는 계산 결과를 캐시 가능하다.

리렌더링 간에 함수 정의를 캐싱해준다. 🤓 기본 문법 fn : 인자, 반환값을 가질 수 있고, 첫 렌더링에서 해당 함수를 반환한다. dependencies : 값이 같다면 같은 함수를 반환하고, 변경되었다면 전달한 함수를 반환하고 재사용이 가능하도록 저장한다.

자식 컴포넌트를 DOM 트리의 원하는 영역에 렌더링 할 수 있다.모달을 만들 때 자주 사용된다.children : jsx의 일부(, ) 문자열, 숫자 또는 React로 렌더링 할 수 있는 모든 것domNode : 반환할 DOM 노드. 노드가 이미 존재해야 하는 상태여야

form 액션의 결과를 기반으로 state를 업데이트할 수 있도록 제공하는 Hookstate : 현재 state, 첫 렌더링 시에는 initialState, 액션 실행 이후는 액션이 반환한 값formAction : <form>컴포넌트의 action prop이나 b

웹 브라우저 전용 버전이며, react-router에 DOM전용 기능이 들어간 확장판이다.브라우저 기반 SPA를 만들때 사용하면 된다.➕ 설치🤓 url로 페이지 이동하기 (함수 기반 라우팅)react router v6.4이전 방식➕ 중첩 라우팅하기

action의 props에는 URL, 함수가 들어갈 수 있다.URL : form은 HTML 폼 컴포넌트처럼 동작한다.함수 : 해당 함수는 form 제출을 처리한다. formData가 함수의 인수로 전달되어 폼에서 전달된 데이터에 접근할 수 있다.➕ formData란?f

React Hook Form(RHF)은 React에서 폼을 효율적으로 다룰 수 있게 해주는 라이브러리성능 최적화입력값 변경 시 전체 폼이 아닌 해당 필드만 추적useState 기반 폼보다 리렌더링이 훨씬 적음간결한 코드onChange, setState, onBlur 등