React

참조(ref)는 React에서 DOM 요소나 클래스형 컴포넌트에 접근하기 위해 사용됩니다.예를 들어, input 요소에 포커스를 맞추거나, dialog 같은 내장 DOM 요소의 메소드를 호출할 때 사용합니다.TimerChallenge: 타이머를 시작하고, 만료되었을 때

portal로 만들어준 attendcountModal.tsx 파일에서 useEffect의 인자값을 //eslint-disable-line으로 강제로 린트를 껐다.(최초의 한번만 뜨게하기 위해)open,close를 넣으면 각각의 상태 업데이트 계속 해줘서 무한루프가 도는

컴포넌트의 상태를 관리할 때 사용됩니다. 상태가 변할 때마다 컴포넌트를 다시 렌더링하고 싶을 때 주로 사용됩니다. 상태를 변경하면 해당 컴포넌트가 다시 렌더링됩니다.이전 값과 새로운 값을 연결하고, 렌더링과는 무관하게 값이 유지되어야 할 때 사용됩니다. 리렌더링 없이

사용자가 입력한 검색어에 따라 다른 HTTP 요청을 보내고,그에 맞는 검색 결과를 화면에 보여주기 위해 탠스택 쿼리를 사용해보자!!!searchTerm은 검색어를 상태로 관리하는 useState입니다.초기값이 undefined이기 때문에, 초기에는 쿼리가 비활성화됩니

현재 문제점은...사용자가 데이터를 업데이트(수정)하고 나서도 페이지를 새로 고치지 않으면 업데이트된 정보가 화면에 반영되지 않는 문제가 있다. 사용자는 수정한 내용을 곧바로 확인하고 싶어 하지만, 현재 시스템에서는 백엔드 서버의 응답을 기다리고 페이지를 새로 고쳐야만

자바스크립트에서는 엄격 모드가 있다. 코드 파일 상단에 "use strict"를 써 놓으면 자바스크립트를 실행할 때 조금 더 엄격하게 코드를 검사한다.리액트에도 이와 유사한 목적으로 사용하는 라는 컴포넌트가 있다."StrictMode는 애플리케이션 내의 잠재적 문제 알

(Document Object Model)Elements = html 하나하나의 요소Document = 이 모든 요소들을 담고 있는 웹페이지DOM이란 1\. 이렇게 웹페이지에 들어있는 html element들을 트리형태구조로 표현한것.2\. 웹 페이지를 이루는 태그들을

용어정리 DNS (Domain Name System Servers) '도메인 이름 시스템 서버'는 URL들의 이름과 IP주소를 저장하고 있는 데이터베이스로, 웹사이트를 위한 주소록이라고 생각하면 된다. 숫자로 된 IP주소(ex. 63.245.217.105) 대신 사용

자바스크립트 객체로 이미 구성된 데이터가 있다면, 그 객체를 여러 Prop들로 나누는 대신 하나의 Prop 값으로 전달할 수 있습니다.즉,또는대신,이처럼 CoreConcept 컴포넌트에 하나의 concept Prop를 전달할 수 있습니다 (Prop 이름은 선택적):그러

React에서 부모 컴포넌트가 자식 컴포넌트에게 전달할 수 있는 특별한 prop입니다. 이를 통해 부모 컴포넌트는 자식 컴포넌트의 태그 사이에 위치한 모든 JSX나 다른 컴포넌트들을 포함할 수 있습니다.다시 말해서, props.children은 부모 컴포넌트의 오프닝

공식 문서에 따르면 Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공한다고 되어있다.즉 외부에 존재하는 DOM 노드가 React App DOM 계층 안에 존재하는 것처럼 연결을 해주는 포탈 기능을 제공합니다

Refs는 React에서 DOM 요소나 컴포넌트 인스턴스에 직접적으로 접근할 수 있게 해 줍니다. 일반적으로, React 데이터 흐름 (props를 통해 부모에서 자식으로 데이터를 전달) 외의 방법을 제공합니다.React 컴포넌트가 부모 컴포넌트로부터 ref를 받아 자

React Router는 라우팅을 위한 강력한 도구입니다. 라우팅을 사용하면 애플리케이션의 구조를 분리하고, 사용자에게 다양한 페이지를 제공할 수 있습니다.React Router DOM v6에 새로 생긴 기능인 loader를 활용하면 라우트와 관련된 데이터를 더 쉽게

react-router-dom 패키지는 동적 라우팅과 함께 데이터를 처리하는 Form 컴포넌트와 action 함수를 제공합니다. 이를 활용해 사용자 입력을 효율적으로 처리하고 서버로 전송할 수 있습니다.먼저, 사용자에게 이벤트 데이터를 입력받을 EventForm 컴포넌

로그인 상태의 지속 여부에서 사용자가 로그인을하고 다른페이지에 접속하거나 시간이 서버로 부터 받은 유효한 토큰 시간이 넘어갔을때 처리해줄 필요가 있다.보통 토큰은 보안때문에 유효기간이 짧게 설정되어 있다.현재 연결되어있는 서버에는 토큰의 만료시간이 1시간으

사용자가 새로운 이벤트를 추가했을 때, 현재 화면에 표시된 이벤트 목록이 즉시 업데이트되지 않으면, 사용자는 방금 추가한 이벤트를 확인할 수 없다. 이러한 경우, React Query의 쿼리 무효화 기능을 통해 데이터의 일관성을 유지할 수 있다!새 이벤트를 생성해도 R

디바운스는 입력 값이 빠르게 연속적으로 변할 때, 마지막 입력만을 처리하기 위해 사d용한다. 예를 들어, 사용자가 검색창에 입력할 때마다 검색 요청을 보내는 대신, 입력이 멈추고 일정 시간이 지나면 그때 한 번만 요청을 보내는 것이 효율적이다.이 훅은 사용자가 입력하는

Suspense는 요소가 아직 로드 중이거나 아니면 이 자식에서 Suspense가 검출 됐을때 Fallback요소를 그려주는 역할을 한다.suspense는 뜻으로도 완성되지않은, 미완결된 인데 이름처럼내부자식이 완결되지 않은, 로드되지 않았다면 fallback 요소를

모든 소스코드는 코드를 실행하기 앞서 평가과정으로 거치고, 이 평가과정을 통해 실행에 필요한 정보(식별자, 스코프, 코드 실행 순서 등)을 담은 실행 컨텍스트라는 것을 생성하게 된다.이 실행컨텍스트들을 담은 스택이 바로 콜스택 !평가란? 코드를 계산하여 값을 만드는것(