리액트 이모저모

참고자료useQuery, useSWR같은 data fetching 라이브러리를 사용하면, 쉽게 데이터를 가져올 수 있고 동일한 요청을 하는 여러 컴포넌트가 동시에 렌더링 되더라도 한 번만 요청합니다. 또한, 백그라운드에서 서버에 주기적으로 polling을 하면서 데이터

리액트 상태관리 가이드

리액트는 최신 문법을 최대한 활용해서 표현Destructuring(객체할당)optional chaining번거롭게 초기 데이터값을 설정하기 보다 null로 선언하고, 객체.값을 접근할 때 optional chaining을 사용하거나, loading flag 상태에 의해

순수 함수와 비순수 함수란?현재 '달'을 바꾸는 버튼을 눌러 1월이나 12월이 넘어가면 '년도'가 바뀌도록 코드를 짰다. 하지만 저런 에러가 뜬다.이유는 Recoil에서는 상태 업데이트 함수가 순수 함수여야하기 때문이다.즉, 동일한 입력에 대해 항상 동일한 결과를 반환

자식 요소들을 나타내는 TypeScript에서 사용되는 타입다양한 종류의 자식을 허용하는 타입이는 문자열, 숫자, 다른 React 엘리먼트, 혹은 컴포넌트가 포함된 배열 등 여러 종류의 자식을 나타낼 수 있다.문자열, 숫자열, html, 배열, null 등등

그러므로 <br>태그로 변환해야 함리액트는 여기서 \\n을 줄바꿈해주지 않는다이렇게 \\n을 <br />태그로 변환했다.

Fetch & Axios

여는 태그와 닫는 태그 사이에 문자열 리터럴을 넣을 수 있고 이 때 props.children은 그 문자열이 된다. 이는 아래의 예시와 같이 많은 HTML 내장 element에 유용하다.

값이 변경 되었다는걸 판단하기 위해 리액트는 객체로 저장된 state를 비교 연산한다.객체 비교시 판단 근거는 객체의 메모리 주소인데 직접 값을 수정하면 메모리 주소가 동일하여 리액트는 변화를 감지하지 못한다. 상태 변경을 추적하고 변경에 따라 구성요소를 다시 렌더링하

복잡한 앱 -> 상태 많아지면서...전역에 노출된 상태를 관리하는 것이 어려워짐상태를 좁혀야 함높은 수준의 상태는 전역변수와 같은 고민이 생김recoil과 같은 상태 관리 라이브러리를 이용하여 props 드릴링 회피 등의 방법불필요한 라이브러리 사용 금지라이브러리를 사

React 프로젝트를 진행하다 보면 useEffect를 사용할 때 종속성 배열에 대해 정확히 이해하는 것이 매우 중요하다. 아래의 두 코드 예제는 useEffect의 종속성 배열 설정에 따라 작동 방식이 어떻게 달라지는지를 보여준다.1번 코드2번 코드1번 코드와 2번

주요 역할: 최신 자바스크립트 문법을 구형 브라우저에서도 동작할 수 있도록 변환(트랜스파일)하는 도구이다.리액트와의 연관성: 리액트는 JSX라는 확장된 자바스크립트 문법을 사용한다. JSX는 브라우저가 직접 이해할 수 없기 때문에, 이를 일반 자바스크립트로 변환해야 한

설정 자동화:CRA는 리액트 애플리케이션을 설정하는 가장 간단한 방법 중 하나로, 개발에 필요한 기본적인 설정을 자동으로 해준다.바벨과 웹팩 포함:CRA는 바벨과 웹팩을 기본적으로 포함하여 별도의 설정 없이도 최신 자바스크립트 문법과 모듈 번들링을 지원한다.개발 환경:

https://www.youtube.com/watch?v=cc7BNZIsDSk&ab_channel=HEROPYhttps://www.youtube.com/watch?v=iZ9csAfU5Os&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD

DOM웹 페이지의 구조를 트리 형태로 표현한 객체 모델브라우저는 DOM을 통해 문서의 요소를 조작할 수 있다.documentDOM 트리의 루트로, 전체 문서에 대한 접근을 제공ex) document.getElementById나 document.querySelector를

React 애플리케이션을 개발하다 보면, 하위 컴포넌트에 데이터를 전달하는 방법에 대해 고민하게 된다. 예를 들어, 상위 컴포넌트(A)와 그 하위 컴포넌트(A-1)가 있을 때, A-1 컴포넌트가 필요한 데이터를 어떻게 가져와야 할까? 여기에는 크게 두 가지 방법이 있다

이미지 미리 보기 기능을 구현한다면이미지 <span style="color:이미지 파일을 <span style="color:(File -> Base64 Data URL)미리보기는 createObjectURL를 사용하면 좋다.

리액트는 props와 state에 변경이 있을 때 리렌더링이 발생useCallback, React.memo, useMemo 모두 <span style="color: >>렌더 페이즈란?(https://velog.io/@rlaugs15/%EB%A6%AC%EC

React에서 이미지를 삽입하는 방법은 3가지가 있다.css 파일에서 이미지의 url 경로 혹은 src폴더 내의 이미지 파일을 가져오고 싶을 때url()에 이미지 경로를 삽입하면 된다.CSS 파일에서 이미지를 삽입할 때, url() 내부의 경로는 상대경로와 절대경로 모

useContext, Recoil, 그리고 Zustand는 모두 리액트에서 상태를 관리하는 데 사용되는 도구들이다. 각각의 도구는 다소 다른 방식으로 상태 관리를 제공하며, 적절한 사용 시나리오와 장단점이 있다. 아래에서 이를 간단히 비교하고, 언제 적합한지 설명해주겠

리액트 컴포넌트는 클로저를 사용하여 내부 상태와 props를 유지한다. 특히 함수형 컴포넌트에서 클로저는 다음과 같은 상황에서 매우 유용하다:컴포넌트 내부에서 이벤트 핸들러를 정의할 때, 이 핸들러는 컴포넌트의 상태나 props를 참조하게 되며, 이 참조가 클로저로 유

이처럼 public 폴더 안에 videos 폴더를 만들고 그 안에 비디오 파일을 넣어야 한다.url='/videos/test.mp4' 을 통해 불러와 사용한다.주의점비디오 폴더는 무조건 public 폴더 밑에 종속되어야한다.src위치 설정해줄때는 비디오폴더가 어디 있던

리액트 로딩화면 스피너 만드는 여러가지 방법(gif, React-spinners)

현재 JSON 파일들을 public 폴더에 넣어 관리 중이다. 하지만 src 폴더에 정적 파일을 관리하면 더 편리하다는 의견이 있어 고민하게 되었다.public 폴더는 다음과 같은 이유로 정적 파일을 보관하기에 적합하다:빌드 후 복사: build 폴더에 복사되어 빌드

1\. WebSocket클라이언트와 서버 간 양방향 통신 가능지속적인 연결을 유지하여 데이터를 주고받음ws 프로토콜을 사용하며, 초기 연결 시 한 번만 핸드셰이크를 수행 → 통신 오버헤드가 낮음2\. Polling클라이언트가 주기적으로 서버에 요청을 보내고 응답을 받음

리액트 카카오맵 라이브러리를 사용하면서 좌표로 주소를 얻어오려 한다.카카오맵 자바스크립트 aip의 Geocoder 객체를 활용할 생각이다.예제 코드window.kakao.maps.services.Geocoder는 Kakao Maps API에서 제공하는 객체로, 좌표를

SVGProps<SVGSVGElement>는 React에서 SVG 요소(svg)의 모든 속성을 포함하는 타입이다.즉, SvgBookMarkIcon 컴포넌트는 SVGProps<SVGSVGElement>를 상속받아 SVG 태그에 적용 가능한 모든 속성을 prop

프로젝트를 진행하면서 쿼리스트링을 감출 수 있을까? 라는 생각이 들었다.그러다 리액트 라우터 돔의 HashRouter를 사용할 경우 그것이 가능하다는 것을 알았다.HashRouter와 BrowserRouter의 차이점 그리고 왜 HashRouter를 사용할 경우 쿼리스

프론트엔드 개발자와 이야기하다가 React는 기본적으로 XSS 공격을 막아준다는 말을 들었다. 이게 과연 어디까지 맞는 이야기일까?결론부터 말하면JSX 안에서 텍스트 형태로 렌더링할 때는 React가 자동으로 XSS를 방어해준다.하지만 HTML을 직접 삽입(danger