리액트 (48) 썸네일형 리스트형 [리액트] 1. useState useState useState는 React의 내장 hook 함수 중 하나로, 함수형 컴포넌트에서 상태를 관리하기 위해 사용됩니다. useState는 배열을 반환하며 첫 번째 요소는 현재 상태값을, 두 번째 요소는 상태를 갱신하는 함수를 포함합니다. 보통 리액트에서 상태관리라고 하면 제일 먼저 떠오르는게 useState 를 이용한 기본적인 상태관리 방식이라고 볼 수 있습니다. 예를 들어, 간단한 숫자를 더하는 컴포넌트를 만들어보겠습니다. 이 컴포넌트에서는 useState를 사용하여 현재 상태값을 저장하고, 버튼을 클릭할 때마다 상태값을 갱신하고 화면에 출력합니다. import { useState } from 'react'; function Counter() { const [count, setCount] .. [리액트] 리액트에서 DOM에 대한 직접 접근을 권장하지 않는 이유와 Ref 훅을 통한 DOM 접근 리액트는 가상DOM을 이용하여 변경된 부분만 렌더링을 시도합니다. 리액트에서 DOM에 직접 접근하는 것은 권장되지 않습니다. 이는 리액트의 핵심 원칙 중 하나인 가상 DOM(Virtual DOM)의 개념과 관련이 있습니다. 리액트는 가상 DOM을 사용하여 컴포넌트의 상태(state)나 속성(props)이 변경될 때마다 화면을 다시 그리지 않고, 변경된 부분만 감지하여 최소한의 렌더링을 수행합니다. 이를 통해 빠른 성능과 원활한 사용자 경험을 제공합니다. 그러나 DOM에 직접 접근하게 되면, 가상 DOM을 우회하여 실제 DOM에 직접 변경을 가하게 됩니다. 이는 리액트의 성능 최적화를 무력화시키고, 예상치 못한 결과를 초래할 수 있습니다. 따라서, 리액트에서는 state나 props를 변경하는 방법을 제공.. [ReactJS] React.lazy() API ; 필요한 컴포넌트만 동적 로드하는 API React.lazy()는 코드 스플릿팅과 함께 사용하여 필요한 컴포넌트만 동적으로 로드할 수 있도록 하는 React API입니다. 이를 사용하면 초기 로드 시간을 단축하고 애플리케이션의 성능을 향상시킬 수 있습니다. 다음은 React.lazy()의 예시입니다. import React, { lazy, Suspense } from 'react'; const LazyComponent = lazy(() => import('./LazyComponent')); function App() { return ( // 가 렌더링 되기 전에 Loading... 을 화면에 보여줍니다. ); } export default App; 위 예시에서는 App 컴포넌트에서 LazyComponent를 동적으로 로드하고 있습니다. 이를 위.. [react type] React.FC React.FC React.FC는 TypeScript를 사용하여 React 함수 컴포넌트를 정의하는 데 사용되는 제네릭 인터페이스입니다. FC는 "Function Component"의 줄임말입니다. React.FC를 사용하면 함수 컴포넌트의 props에 대한 타입 선언이 더욱 간편해집니다. 예를 들어, 다음과 같이 사용할 수 있습니다. import React from 'react'; interface Props { name: string; age: number; } //React.FC를 사용하면 return 으로 어떤 값(ReactNode)이든 반환할 수 있습니다. const MyComponent: React.FC = ({ name, age }) => { return ( Name: {name} Age: .. [리액트 에러] react-dom.development.js:16317 Uncaught Error: Too many re-renders. Re 문제의 에러 react-dom.development.js:16317 Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. 문제의 코드 const MoviesCard = () => { const [alert, setAlert] = useState(""); const navigate = useNavigate(); const searchDate = useSelector((state: SearchDateType) => { const results = state.sortBySearch.data.results; // results가 undefined가 아닐 때 results.length <.. [react] 리액트에서 가상돔 - 본인이 이해한 리액트의 가상돔에 대한 정리입니다. - 리액트는 실제 DOM과 완전히 똑같은 2개의 가상돔을 생성한다. 리액트는 가상돔(Virtual DOM)이라는 것을 적용했다. 웹 개발에서 DOM(Document Object Model)의 변경을 관찰하고 최적화하는 기술을 가상돔(Virtual DOM) 이라 한다. 가상돔은 자바스크립트에서 DOM(Document Object Model)과 완전히 똑같은 복사체이다. 리액트는 실제 DOM과 완전히 똑같은 복사체인 가상돔을 두 개 생성하는데, 하나는 렌더링 이전의 가상돔, 다른 하나는 렌더링 이후의 가상돔이다. 즉, 변동사항을 반영할 가상돔과 읽기 전용인 가상돔을 생성한다. 리액트는 두 가상 돔을 비교해서 변동사항만 실제 DOM 에 반영한다. 리액트는 .. [리액트 타입에러-해결중] Property 'review' does not exist on type 'string | number'. Property 'review' does not exist on type 'string' 에러 메시지 전문 도대체 뭐가 문제여?! 이거 예전에 뜬 적 있던 타입에러 인데, 또 같은 에러가 뜬다. 예전에는 useState의 타입을 그냥 any[ ] 타입으로 지정하고 넘어 갔는데, 나중에 프로젝트가 커지니까 예상치 못한 곳에서 에러가 뜨길래 디버깅을 거슬러 올라가니 any[ ] 으로 지정한 부분이 문제가 되었다.. 그래서 이번에는 이것을 미리 사전에 차단하고 넘어가려고 하는데, 아직도 도대체 뭐가 문제인지 모르겠다. 에러 메시지를 해석 해보면 (string | number) [ ] 타입의 배열에서 review 라는 프로퍼티(속성)이 존재하지 않는다는 타입 에러인데,, 이건 무슨 장식인가? 타입 에러를 떠나서 잘만 존재하는 데이터인데, 타입 에러가 뜬다. 위 데이터가 존재하지 않는다. 무슨 사람 .. [react] 리액트 환경에서 <input type =range> 사용 시 Uncaught TypeError: Cannot read properties of null (reading 'value') 가 뜬다면 아래와 같이 range의 속성값을 useState 에 저장하여 , 버튼을 조작하려는 상황에서 const [rangeVal,setRangeVal] = useState('') return ( { console.log(e.currentTarget.value); setRangeVal((rangeVal) => {return rangeVal = e.currentTarget.value}); }}> ) 에러와 함께, 백지와 같은 페이지를 만나게 된다면 sortbyDate.tsx:22 Uncaught TypeError: Cannot read properties of null (reading 'value') 다음과 같이 click 이벤트를 실행할 함수를 외부에 정의하면 에러가 해결된다. onClick 의 콜백함수 내에서 .. 이전 1 2 3 4 5 6 다음
