React

daisyui에는 모달 대화상자 CSS 컴포넌트를 제공. modal, modal-box, modal-action 3가지 클래스로 구성.

onChange event type → ChangeEvent checkbox,radio → e.target.checked 속성 사용 onChange 이벤트콜백

클래스 컴포넌트에서 상태는 항상 state 라는 이름의 멤버 속성으로 구현해야 한다는 제약 조건이 있음.state 속성에 멤버 속성을 만들고 초깃값을 설정해 제약 조건을 만족.render() 메서트에서 this.state. 형태로 멤버 속성값 얻을 수 있음.

useEffect, useLayoutEffect 두 훅은 사용법이 같고 콜백 함수는 훅이 실행될 때 처음 한번은 반드시 실행. 의존성 목록이 빈 배열 [ ] 일지라도 한 번은 콜백 함수를 호출. 의존성 목록이 변경될 때마다 콜백 함수를 계속 실행. 두 훅의 콜백 함

아래 코드는 이벤트 처리기에서 file 값을 얻고있다.FileList 는 File 타입의 리스트이며 유사 배열 객체이다. 유사 배열 객체는 Array.from() 함수로 배열로 변환 할수 있다.File 타입 객체를 읽을 수 있도록 자바크스립트 엔진은 FileReader

아래는 리액트가 요구하는 input의 value 속성과 관련된 코드 패턴이다. 리액트가 이런 패턴을 요구하는 것은 가상 DOM 환경에서 빠른 리렌더링을 위해서 이다. 하지만 ref 속성으로 물리 DOM 객체가 만들어지면 이 객체의 value 속성 값을 곧바로 얻을 수

부모 컴포넌트에서 생성한 ref를 자식 컴포넌트로 전달해주는 역할.리액트가 제공하는 기본 컴포넌트인 <input>은 ref 속성에 값을 설정할 수 있지만,사용자 컴포넌트의 경우 ref 속성을 forwardRef 함수로 전달해야함.타입변수 T 는 ref대상 컴포넌트

PostCSS는 웹 개발에서 CSS를 변환, 분석 및 확장하기 위한 도구입니다. 기본적으로 CSS 전처리기로 사용되지만, 다양한 플러그인을 통해 CSS를 수정하고 확장할 수 있는 강력한 도구입니다.Autoprefixer 플러그인은 CSS에 자동으로 벤더 프리픽스를 추가

컨텍스트란? >리액트 컨텍스트(React Context)는 리액트 애플리케이션에서 전역적인 데이터를 효율적으로 공유하기 위한 메커니즘입니다. 컨텍스트를 사용하면 컴포넌트 트리를 깊이 내려가지 않고도 데이터를 전달할 수 있으며, 중간 컴포넌트에서 프로퍼티로 데이터를 전달

useState 훅에서 상태 업데이트를 함수형으로 처리하면 항상 최신 상태를 유지할 수 있습니다. 이는 React의 상태 업데이트의 비동기적인 특성과 관련이 있습니다.일반적으로 useState 훅을 사용하여 상태를 관리할 때, 상태를 업데이트하는 함수를 호출하면 Rea

React portal 리액트 포털(React Portal)은 리액트 애플리케이션에서 DOM 트리의 특정 부분을 다른 DOM 노드로 렌더링할 수 있는 기능입니다. 일반적으로 리액트 컴포넌트는 자신이 마운트된 DOM 요소 내에서 렌더링됩니다. 하지만 리액트 포털은 컴포넌

ref 속성을 이용한 input 값 접근.state를 사용하는 것보다 필요한 코드가 상대적으로 적음, 그러나 ref값을 변경하기 위해선 DOM을 직접 조작한다는 예외적인 일을 해야함.input에 입력된 값만 알고싶다면 ref 를 이용하는게 더 나을 수 있다.

React에서 "side effect"는 컴포넌트의 렌더링과는 별개로 발생하는 작업이나 상태 변화를 말합니다. 컴포넌트의 생명주기 동안 발생할 수 있는 다양한 동작을 포함합니다. 일반적으로 다음과 같은 상황에서 side effect가 발생합니다:데이터 가져오기 및 변경

state: 현재 상태를 나타내는 값입니다.dispatch: 액션을 발생시켜 상태를 업데이트하는 함수입니다, 리듀서 함수의 action을 dispaatch해서 state를 업데이트함.reducer: 상태 업데이트를 처리하는 리듀서 함수입니다.initialState: 초

npm i react-router-domimport {createBrowserRouter} from 'react-router-dom'import {RouterProvider} from 'react-router-dom'router 변수 만들기 도메인 뒤에 path(경로)