다음과 같은 질문에 답은 뭘까?1. userB의 출력값은 뭘까?const userA = { name:"Tom", profile :{email:"Tom12@gmail.com"}};const userB = {...userA}userA.name="Mon"userA.profile.email = "Mon12@gmail.com"console.log(userB) 자칫하면 ' {name :"Mon", profile:{email:"Mon12@gmail.com"}} ' 으로 생각할 수 있다.userB는 userA의 얕은 복사본을 생성한다. name 속성이 얕은 복사 과정에서 '값'으로 복사가 되므로 userB.name에는 영향을 주지 않는다 .여기서 name이 그저 문자열이고, 문자열은 기본형(primitive) 이기 때..

참고문서에 따르면 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가 변경될때마다 '{}'로 초기화를 해주고 있는 것이다.다음..

1. new Arrayex> new Array('a') 이때 new 없이 Array('a')만 선언해도 똑같이 배열을 생성한다. 2. Array.from()Array.from()은 이터러블객체(반복 가능한 객체)를 인수로 받아 배열로 변환한다.ex> Array.from('food') // [ 'f','o','o','d' ] Array.from([100,200,300] , a=>a+a); // [200, 400 , 600]또한 특정길이의 배열을 만들어서 연속 된 수를 넣을 수도 있다고 한다.Array.from ({length: 길이}, Func(_, i )} -> a 길이의 유사배열객체를 생성한다. ex> Array.from({length: 4}, ()=>[]); // 4 길이만큼..

react-hook-form 을 이용해 폼 작성을 구현하는 도중에  이미 기초값이 있는 폼 필드에서 새로운 값으로수정을 하려면 해당 필드를 찾아야 했다. 그래서 처음엔 watch 속성을 사용했다. const counselTime = watch('counselTime') ( field.onChange(e.target.value)} />)} /> watch는 폼의 입력 값이 변경될 때마다 특정 값을 반환한다. 예를 들어 5개의 input이 있을때 하나의 input 값만 바뀌어도 5개 모두 다 리렌더링이 되버려서 성능 최적화에 적합하지 않는다는 것! 공식 문서에도 이렇게 나와있는 걸 볼 수 있다.' watch는 호출될 때 어플리케이션 또는 Form을 전부 리렌더링하므로 성능 이슈가 발생한다면 ..

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