반응형 2022/109 useMutation : mutate는 void, mutateAsync는 promise 아래와 같이 적으니 await가 걸리지 않았다. /* Mutation */ const { mutate: reviveApplication } = useMutation(variables => reviveApplicationRequest(variables)); .. onOk: async () => { if (slugUrlData) { //await가 걸리지 않음 const { data: reviveApplicationData } = await reviveApplication({ applicationUuid, userUuid: profile?.uui.. 2022. 10. 19. useToast만들기 맨날 남이 만들어준거 쓰다가 그냥 만들어보았다 디자인은 대충했다 ㅎ 빨간토스트가 nagative, 파란토스트가 positive이다. 빨강토스트는 1초후, 파랑토스트는 3초후 사라지게 하였다. 코드 // App.tsx import useToast from "./hooks/useToast"; function App() { const { showToast } = useToast(); return ( showToast(false, "bye", 1000)}>토스트 빨강 showToast(true, "hi", 3000)}>토스트 파랑 ... ); } export default App; type, string(내용), time(몇초후 사라질지)를 매개변수로 받는 showToast 함수를 리턴한다. /// useToa.. 2022. 10. 13. state를 직접 변경하지 않고 useState로 변경해야 하는 이유 그냥 리액트는 변수가 state고 변경할땐 useState쓰는거야! 라고 생각해왔다가 오늘 한번 이유를 생각해보았다. state가 변경될때 업데이트되기 때문에?? 그럼 왜 직접변경은 안되고 꼭 useState로 변경시켜야할까?? 이유는 리액트가 객체의 메모리주소 를 비교하기 때문이다. 직접 변경하면 값만 변경되고 메모리주소는 변경되지 않으므로, state변화를 알아채지 못한다. => 리렌더링 x, 화면이 업데이트 되지 않음 const [name,setName] = useState(' '); 여기서 setName은 name을 변경하는 것이 아니라, 메모리 어딘가에 있는 값(메모리주소)을 변경하는 것이다. 그 후 name과 관련된 DOM이 리렌더링 된다. 참고1 참고2 2022. 10. 7. 제어컴포넌트 비제어컴포넌트 제어컴포넌트 : 어플리케이션이 사용자 입력을 제어한다. 실시간으로 값에 대한 피드백이 필요할 때 사용 항상 최신상태 유지, 사용자가 입력하는 모든데이터 동기화 제어컴포넌트는 사용자가 입력하는 모든 데이터가 동기화 되기 때문에 불필요한 리렌더링 혹은 api요청으로 인한 과부하가 걸릴 수 있다. 이런 경우 보통 debounce를 사용하고 있다. (대부분 debounce 혹은 throttle을 사용할 듯) 비제어컴포넌트 : 어플리케이션이 사용자 입력을 제어하지 않음 제출시에만 값이 필요할 때 사용 사용자의 입력값이 어플리케이션을 업데이트 시키지 않음. 사용자가 직접 트리거하기 전까지 리렌더링이나 업데이트가 되지 않음. ref를 이용하여 form내의 값을 관리하면 불필요한 리렌더링을 방지할 수 있는데, 이러한 .. 2022. 10. 3. 이전 1 2 3 다음 반응형
