React16 dynamic 클래스가 안될 때 아래처럼 rotate-[${변수}deg] 이런 식으로 변수를 사용해서 tailwindCSS 클래스를 사용하려고 하면 안 됩니다. for (let i = 0; i < count; i++) { const element = ( ); list.push(element); } 안 되는 이유는 tailwindCSS가 빌드 타임에 검사를 하는데 안 쓰는 클래스들은 제거하기 때문입니다. 제가 해결한 방법은 사용할 클래스들을 미리 작성해 두고, watilwind.config.js 파일에서 해당 파일을 명시하는 것으로 해결했습니다. 일단 유틸 파일로 빼두고요. // size.ts // rotate deg export const ROTATE_DEG = [ 'rotate-0', 'rotate-1', 'rotate-2', 'ro.. 2023. 8. 9. [바닥부터 만들기] 리액트 없이 리액트 사용하기 - 1 (하드코딩) 리액트 없이 리액트 만들어보기 대작전. 일단 리액트 없이 하드 코딩된 버전으로 “Hellow”를 브라우저에 띄어 봅시다. 만약 리액트 16.8 버전 기준 리액트 코드를 DOM으로 렌더링을 한다면 아래 코드처럼 많이 작성했을 거예요. (리액트 18 버전에서는 createRoot(element). render() 사용) const ReactDOM = {}; // import 했다고 가정합시당. 🥰 const element = Hello; const container = document.getElementById('root'); ReactDOM.render(element, container); JSX 코드 변환해 주기 const element = Hello; 이 부분은 바벨이 자바스크립트 코드로 변환해 줍니다.. 2023. 8. 3. Server mutate시 react-query cache 사라짐 현상 문제 발생 nextjs에서 sever mutate를 이용하려면 useRouter()를 사용하여 페이지를 refresh를 해줘야된다. 근데 나는 react-query와 같이 사용중이었는데 문제가 발생했다. useRouter().refresh()를 하면 react-query의 캐시 데이터가 모두 사라졌다. 아래 사진을 잘 보면 button 클릭시 데이터들이 모두 지워짐 아래는 코드이다. 'use client'; import { useQuery } from '@tanstack/react-query'; import { useRouter } from 'next/navigation'; async function fetchTest() { return fetch('/api/t', { method: 'get' }).th.. 2023. 7. 15. 상태(state) 업데이트의 비밀(batch)🤫 상태를 업데이트해서 일어나는 과정과 비밀을 알아보겠습니다. 리액트가 렌더링 된 컴포넌트를 언제 업데이트를 시키나요? 다들 아시다시피 바로 상태가 업데이트 됐을 때입니다. import { useState } from 'react'; function App() { const [num, setNum] = useState(0); const onClick = () => { setNum(num + 1); }; return ( {num} 클릭 하면 1이 증가 ); } export default App; 보시다시피 클릭하면 +1이 된 값이 화면에 나타납니다. 너무 당연하죠? 하지만 아래와 같이 setNum(num+1)이 여러 개인 경우에는 어떻게 될까요? 5가 될까요? import { useState } from 'r.. 2023. 6. 12. 이전 1 2 3 4 다음
