⚛️ React/개념

React : 실시간 데이터가 중요할땐 react-query (설치/사용), RTK Query

** ReactDOM.createRoot는 React 18부터 도입된 새로운 렌더링 API이다. 그러나 @tanstack/react-query 패키지는 아직 React 18에 대한 완전한 지원을 제공하지 않을 수 있어서, @tanstack/react-query와 ReactDOM.createRoot를 함께 사용할 때 문제가 발생할 수 있다..고 하는데 그래서 계속 react-query를 설치하면 useEffect가 null이 되는 오류가 일어나고 있다. 쓸 때 다시한번 볼 것. react-query ajax를 쓰다 보면 다양한 기능들(몇초마다 자동으로 데이터를 가져오기/다음 페이지 미리 가져오기/요청실패시 몇초 간격으로 재시도/ajax 성공이나 실패시 각각 다른 html 보여주기)을 써야 할 때가 있다. ..

React : 에서 자주 쓰는 if문 패턴 5가지 (if, 삼항연산자, &&, switch, object)

1. 컴포넌트 안에서 쓰는 if/else 컴포넌트에서 JSX를 조건부로 보여주고 싶을 때 사용한다. if문은 return()안의 JSX내에서는 사용이 불가능하므로 보통 아래처럼 return+JSX를 뱉는 if문을 작성해 사용한다. function Component() { if ( true ) { return 참일시 노출될 HTML; } else { return null; } } else 생략하는 법 return을 만나면 코드가 종료되므로 이렇게 축약 가능하다. function Component() { if ( true ) { return 참일시 노출될 HTML; } return null; } 2. JSX 안에서 쓰는 삼항연산자(ternary operator) jsx 내(return 내)에서 쓸 수 있다...

React : props 중첩되어있을 때 편한 "Context API" (사용법)

App 안에 있는 state를 App -> Detail -> Tab으로 2번 props 전송하려면 조금 귀찮다. 그리고 2번이 아니라 10번 중첩되면 난감해진다. 그럴 때 Context API를 쓰면 편하다. Context API 우선 단점부터 성능이슈(state 변경시 쓸데없는 컴포넌트까지 재렌더링됨)와 컴포넌트 재활용이 어려운 점 때문에 실무에서는 자주 쓰진 못한다고 한다. 그래서 이것보다 redux같은 외부 라이브러리를 더 많이 사용한다. 사용법 전송 보내는 컴포넌트 import { createContext, useState, useEffect } from "react"; export let Context1 = createContext() function App() { let [pracContext..

React : AJAX로 서버와 통신하기 (post, 동시에 요청 여러개 날리기, fetch)

POST 요청 하는 법 서버에 데이터를 보내기 위해서는 아래처럼 작성하면 된다. axios.post('URL', {name : 'kim'}) 동시에 AJAX 요청 여러개 날리기 동시에 여러 url로 ajax 요청을 날리려면 아래처럼 작성하면 된다. 그 아래 then()을 붙이면 둘 다 완료되었을 시 코드를 실행한다. Promise.all( [axios.get('URL1'), axios.get('URL2')] ) .then(()=>{}) fetch axios 라이브러리를 사용하면 자동으로 JSON을 object/array 형태로 변환해주지만, 그냥 fetch를 쓰면 변환해줘야 한다. fetch('URL').then(결과 => 결과.json()).then((결과) => { console.log(결과) } )..

React : AJAX로 서버와 통신하기 (ajax, axios)

서버에 GET/POST 데이터 요청하기 서버에 데이터를 요청할 때는 아래같이 정확한 규격에 맞추어 요청해야 한다. 어떤 데이터인지 (URL) 어떤 방법으로 요청할지 (GET : 서버에서 데이터를 가져올 때 / POST : 데이터를 서버로 보낼 때) 요청하는 법 POST 요청을 날리고 싶으면 태그를 이용한다. GET 요청을 날리고 싶으면 브라우저 주소창에 URL을 적는다. 그러나 이 방법은 브라우저가 새로고침이 된다는 단점이 있다. AJAX 그래서 새로고침 없이 데이터를 주고받을 수 있게 도와주는 브라우저 기능인 AJAX를 쓴다. AJAX로 GET/POST 데이터 요청하는 법 XMLHttpRequest라는 옛날 문법 쓰기 fetch()라는 최신 문법 쓰기 axios같은 외부 라이브러리 쓰기 axios 설치..

React : useEffect, clean up (실행조건)

useEffect 실행조건 useEffect(()=>{ 실행할코드 }, [변수나state]); useEffect()의 둘째 파라미터로 []를 넣으면, 안의 변수나 state가 변할 때마다 useEffect 안의 코드를 실행한다. []안에는 state나 변수를 여러개 넣을 수 있다. [] 안에 아무것도 넣지 않으면 mount(로드)시에만 1회 실행한다. clean up function useEffect(()=>{ //함수 A return ()=>{ //함수 B } }, [변수나state]) 예시 useEffect(()=>{ let timer = setTimeout(()=>{ setAlert(false) },2000) return ()=>{ clearTimeout(timer) } // 기존 타이머 제거 },..