참고문서에 따르면 useTransition은 UI의 일부를 백그라운드에서 렌더링 할 수 있도록 해주는 React Hook이라고 한다.즉, UI를 차단하지 않고 상태를 업데이트 할 수 있다.https://ko.react.dev/reference/react/useTransition useTransition – ReactThe library for web and native user interfacesko.react.dev 기본적인 형태는const [isPending,startTransition]= useTransition(); 1. isPending: 대기중인 transition이 있는지 알려준다.2. startTransition : 상태 업데이트(setState)를 transition으로 표시해주는 함..

const [rowSelection, setRowSelection] = useConditionalState({}, {}, [ offset, sort, ]); table에서 해당 row를 선택했을때의 상태관리를 하는 useConditionalState라는 커스텀훅을 사용하였다. 보면 useState와 유사하면서 특정 의존성이 변경될때 조건부로 상태를 업데이트하는 훅이다.첫번째 인자에는 초기 상태값, 두번째 인자에는 상태 업데이트 조건 함수 혹은 직접 설정할 값을 넣고,마지막 인자에는 의존성 배열을 넣는다.쉽게 말하자면 useState 와 useEffect를 합쳐놓은 느낌? 위 코드에서 보면 의존성 배열에 들어있는 offset,sort가 변경될때마다 '{}'로 초기화를 해주고 있는 것이다.다음..

이 textinput에 값을 입력하고 추가 버튼을 누르면 해당 필드 값이 초기화가 되어야하는데!!자꾸 안되는거다... 이전 값이 남아있다.. 그래서 어디에서 막힌건지 콘솔값을 찍어봤을때 입력하고 추가버튼을 누르면 ""로 초기화가 잘되고 있는 것 같은데 필드에는 여전히 남아있는 이슈..,,  const handleKeywords = () => { if (keyword.trim() === "") { // console.log("키워드가 비어 있음"); return; } if (!keywords.includes(keyword)) { const newKeywords = [...keywords, keyword]; setKeywords(newKeywords); ..

className을 지정한다음 css를 설정하려고 할때import styles from "./TodoItem.style.scss";import cn from "classnames/bind";이 부분에서 "Cannot find module './TodoItem.style.scss'" 에러가 난 적이 있다. 분명 맞는 경로, 파일명도 잘 맞췄다. 근데 모듈을 찾을 수가 없다? 알고보니 타입스크립트는 .scss 같은 CSS 파일을 JavaScript 모듈로 처리하지 않기 때문에 정의 파일 (.d.ts)을 만들어줘야 한다는 것이다. 그래야 타입스크립트가 .scss 파일을 객체 형태의 모듈로 인식한다. // src/types/style.d.tsdeclare module "*.scss" { const conten..

특정 아이콘을 클릭해서 dialog가 뜨게 하려고 했어서 onClick으로 이벤트를 줘서 거기에 dialog 컴포넌트를 호출하게 하면 되겠다! 했던 나의 잘못된 생각... 일단 동작부터도 안되는 이슈! const handleDialog = () => { return( { setVisible(false); }} > ) }; 이벤트 핸들러는사용자의 상호작용에 반응하여 어떤 "동작"을 수행하기 위한 것이다. React 컴포넌트는 UI를 정의하는 것이지, 이벤트 핸들러의 반환값으로 사용되어서는 안 된다!즉, dialog 혹은 modal 같은 경우 상태로 관리해서 조건부 렌더링으로 설정해줘야 하는 것이다.. const App(){ const [visible,s..

next.js 13버전은 페이지 단위로 렌더링 방식을 규정하지 않고 컴포넌트 단위인 서버 컴포넌트, 클라이언트 컴포넌트로 렌더링을 한다.  📌 server 컴포넌트app 폴더 안에 있는 컴포넌트들이 대부분 서버 컴포넌트이다!server 컴포넌트 코드는 서버에서 실행되고 클라이언트에는 코드의 결과만을 제공한다.따라서 console log 자체도 브라우저가 아닌 서버 터미널에서 실행된다. 클라이언트로 js 코드를 보내지 않기에 클라이언트 측에서 부하도 없고 웹사이트의 로딩 시간을 줄일 수 있는 장점이 있다. When?  언제 사용하는가? 데이터 패칭이 필요한 컴포넌트: 서버에서 데이터를 가져오고, 클라이언트에 그 데이터를 렌더링할 때.상태나 이벤트 처리가 필요하지 않은 UI: 예를 들어, 정적인 콘텐츠나 ..