개발하는 너구리

리액트 쿼리를 사용하여 데이터 가져오기리액트 쿼리(React Query)는 리액트 애플리케이션에서 데이터를 관리하고 쉽게 가져오기 위한 라이브러리입니다. 이 라이브러리는 서버 데이터, 캐시 데이터, 로컬 데이터 등을 효과적으로 관리하고 캐싱하여 성능을 향상시키며, 비동기 데이터를 쉽게 처리할 수 있습니다.리액트 쿼리를 사용하여 데이터를 가져오는 과정은 다음과 같습니다:1. Query 생성: `useQuery` 훅을 사용하여 데이터를 가져올 쿼리를 생성합니다. 이 때 쿼리의 키(key)와 비동기 함수를 제공합니다. const { isLoading, data, error } = useQuery('myData', fetchDataFunction);   2. 데이터 가져오기: 비동기 함수(fetchDataF..

쿼리스트링이란?URL의 한 부분으로 요청하고자 하는 URL에 부가적인 정보를 포함하고 싶은 경우 사용쿼리스트링의 사용 예시http://myhomepage.com/products?sort=popular&sort=newurl에서 ?를 통해 쿼리스트링이 시작된다는 표현을 할 수 있다쿼리스트링은 key=value 형태의 문자열로 표현된다쿼리스트링 내부에서 key=value 페어를 구분할 때는 & 연산자를 이용한다.리액트에서 쿼리스트링을 사용하는 경우navigate("/products?sort=new") 와 같이 사용 가능하며렌더링은 /products URL에 해당하는 컴포넌트를 그려준다.리액트에서 쿼리스트링 가져오기앞선 포스팅과 같이 react-router-dom 에서 제공하는 useLocation() Hook..

SPA란?Single Page Application리액트는 SPA의 형식입니다.페이지가 하나라는 뜻으로, 하나의 페이지 안에서 자바스크립트가 필요한 페이지나 정보만 동적으로 그려줍니다.장점새 페이지로 넘어갈 때마다 서버에서 HTML/CSS, JS 소스를 가져올 필요가 없어 새로고침이 필요하지 않아요.사용자에게 물흐르듯 끊김없는 웹 앱 경험을 선사해줄 수 있어요.단점처음에 필요한 리소스를 다 가져와야 해서 초기 구동 속도가 느립니다.JSXJavaScript를 확장한 문법브라우저에서 실행하기 전에 Babel을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.Babel 은 자바스크립트의 문법을 확장해주는 도구입니다. 아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 ..

리액트를 사용하는 이유  결론 : 요즘의 웹이 정적이고 단순한페이지를 넘어서 규모도 커지고 복잡하며 동적으로 바뀌었기 때문.오픈소스 자바스크립트 라이브러리인 React, Vue를 사용하지 않아도 모두 바닐라 JS로 구현이 가능하며 정적인 웹페이지를 만드는 것 만이 목적이라면 굳이 프레임워크의 도움을 받지 않아도 되고 성능적 측면에서 바닐라 JS가 더 나을 수도 있다.하지만 최근의 웹은 복잡하고 동적으로 변하고 있으며 이에 따라 프로젝트의 규모도 더 커졌다. 동적인 UI를 처리하기 위해서 그만큼 DOM 요소들에게 많은 연산을 하는 과정이 반복되면서 과부하가 걸리고 성능 측면에서도 당연히 좋지 않다.   React를 사용해야 하는 이유기능적인 측면에서는 굳이 Framework를 사용하지 않아도 되지만, Fr..

문제점어떤 컴포넌트에서 다른 컴포넌트 내부에 있는 HTML엘리먼트에 직접 접근해야하는 방법이 필요했다.Form컴포넌트 내부에 재사용을 위해 따로 만들어논 Input컴포넌트가 들어가 있고, Form컴포넌트에서 Input컴포넌트 내부 의 value값을 가져와야하는 문제..이런 상황을 그동안 겪어본적이 없었는지 너무나 당연스럽게 Form컴포넌트에서 useRef훅을 사용해 Input컴포넌트에 useRef좌표를 ref프로퍼티로 넘겨줬다. 그 다음 Input컴포넌트에서 props.ref를 받아쓰려고하니,,,, 'ref' is not a prop   시도해본것 리액트에서 ref prop은 HTML 엘리먼트에 직접 접근하기 위해 사용된다는 정의.. 즉 input HTML 엘리먼트의 prop으로서 ref를 바로 줘야한다..

문제점어떤 컴포넌트에서 다른 컴포넌트 내부에 있는 HTML엘리먼트에 직접 접근해야하는 방법이 필요했다.Form컴포넌트 내부에 재사용을 위해 따로 만들어논 Input컴포넌트가 들어가 있고, Form컴포넌트에서 Input컴포넌트 내부 의 value값을 가져와야하는 문제..이런 상황을 그동안 겪어본적이 없었는지 너무나 당연스럽게 Form컴포넌트에서 useRef훅을 사용해 Input컴포넌트에 useRef좌표를 ref프로퍼티로 넘겨줬다. 그 다음 Input컴포넌트에서 props.ref를 받아쓰려고하니,,,, 'ref' is not a prop   시도해본것리액트에서 ref prop은 HTML 엘리먼트에 직접 접근하기 위해 사용된다는 정의.. 즉 input HTML 엘리먼트의 prop으로서 ref를 바로 줘야한다는..

문제점 프론트엔드 백엔드 서버간 api통신 시 url주소에 한글이 포함되어있을경우 시도한점 & 해결 리액트에서 한글 인코딩은 기본적으로 처리되며 별도의 설정이 필요하지 않는다. 리액트는 JS기반으로 동작하며 JS는 문자열을 유니코드로 처리하기때문이다. 따라서 한글을 포함한 모든 문자는 자동으로 인코딩되어 처리된다. 따라서 프론트엔드에서 백엔드 서버로 요청하는 URL에 한글이 포함되어 있다면 별도의 인코딩 처리는 필요하지않다. 구글링을 통해서 새롭게 얻게된 사실이다... 기존에는 URL에 한글이 포함되어있었다면 포함된 한글을 encodeURIComponent()메소드를 사용해 인코딩 해 백엔드 서버로 전송해왔고, 백엔드 서버에서 인코딩된 한글을 제대로 디코딩하는 과정이 있다면 그동안은 올바르게 서버통신이 ..

문제점 부모컴포넌트가 재렌더링되어도 자식 컴포넌트를 유지하는 방법이 필요했다. 자식컴포넌트로 타이머를 렌더링하고있기에, 자식컴포넌트가 유지가 안되면 타이머가 처음으로 되돌아가는 현상이 발생했다. 시도한점 1. 자식컴포넌트에 'React.memo()' 사용 - React.memo 함수는 자식 컴포넌트의 속성(props)가 변경되지 않으면 재렌더링을 방지한다. const ChildComponent = React.memo(({ prop1, prop2 }) => { // 자식 컴포넌트의 렌더링 로직 }); const ParentComponent = () => { const [state, setState] = useState(''); return ( {/* 부모 컴포넌트의 렌더링 로직 */} ); }; 2. 자식..