코딩애플
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 : state 공유하는 "Redux" (state 보관/사용)
store에 state 보관하는 법 import { configureStore, createSlice } from '@reduxjs/toolkit' let 작명 = createSlice({ name : 'state 이름', initialState : 'state 값' }) let user = createSlice({ name : 'user', initialState : 'kim' }) let stock = createSlice({ name : 'stock', initialState : [10,11,12] }) export default configureStore({ reducer: { 작명 : createSlice만든거.reducer, user : user.reducer, stock : stock.red..
React : state 공유하는 "Redux" (설치)
컴포넌트간에 state 전송 없이도 Redux를 사용하면 state를 공유할 수 있다. js파일을 하나 만들어서 state를 몰아넣는 식이다. Redux 설치 전 확인사항 { ... "react": "^18.2.0", "react-dom": "^18.2.0", ... } package.json 파일에서 reat/react-dom 버전이 18.1버전 이상인지 확인하자. 설치하는 법 터미널 설치 npm install @reduxjs/toolkit react-redux store.js 파일생성 import { configureStore } from '@reduxjs/toolkit' export default configureStore({ reducer: { } }) src폴더에 store.js 파일을 생성해 ..
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 : 탭 내용 fade되도록 만들기 (+class에 변수 넣기)
풀이 useEffect를 사용하여 tab 값이 변경될 때마다 fade 값을 업데이트하고, 컴포넌트가 언마운트될 때 fade를 초기화하도록 넣었다. function TabContent({tab}){ let [fade, setFade] = useState('') useEffect(()=>{ setTimeout(()=>{ setFade('end') }, 100) return ()=>{ setFade('') } }, [tab]) return ( {/* */} { [내용0, 내용1, 내용2][tab] } ) } 알게 된 점 cleanup function을 사용해 end를 뗐다가 부착할 수 있도록 하였다. setTimeout을 이용하여 automatic batching 기능을 무효할 수 있도록 하였다. class에..