FE/React19 coustom hook보다 일반 function이 나을 수도 있다. 기술과제를 구현하던 중 열심히 만든 코드가 문득 눈에 들어왔다. api를 호출해 결과 값을 전역 상태에 넣는 커스텀 훅이었다. 생각이 드는 대로 코딩하다 보니, 그리고 동작하는 데 주안을 두다 보니 처음엔 알아차리지 못했다. 아래 사진이 그 코드다. // useGetEurInfo.tsx import { useCallback, useEffect } from "react"; import { useRecoilState } from "recoil"; import { EurInfoAtom } from "../store/eurInfo"; export const useGetEurInfo = () => { const [eurInfo, setEurInfo] = useRecoilState(EurInfoAtom); cons.. 2023. 1. 19. useForm handleSubmit이 동작하지 않는다. 게시판에서 등록과 수정은 항상 세트다. 통신 부분만 빼면 퍼블리싱 코드는 같다. 따라서 재활용해야 제맛이다. 그런데 등록은 정상 작동하는데, 수정 버튼이 눌려지지 않는다. 문제 수정 시 서버에서 데이터를 불러와 input들에 정보를 띄우는 것은 문제 없다. 다만 수정하고 수정 버튼을 누르면 아무 반응이 없다. form은 다음과 같다. .... {isEdit ? "수정하기" : "등록하기"} 수정 상태냐, 아니냐(isEdit)에 따라 onSubmit가 보내는 함수가 달라지게 수정했다. vscode나 콘솔 어디를 봐도 오류도 나타지않아 당황스러운 부분이었다. 등록은 되는데 수정이 안된다니. 시도 1 혹시 onClickUpdate함수를 잘못 작성했나 싶어 처음부터 다시 코드를 확인했다. 혹시 통신 부분에서 잘.. 2022. 12. 12. memoization(feat. useMemo, useCallback) 메모이제이션(memoization)은 동일한 계산을 반복해야 할 때 이전에 계산한 값을 메모리에 저장해 동일한 계산의 반복 수행을 제거함을 뜻한다. 이는 프로그램 실행 속도를 빠르게 하는 기술이며, 복잡한 문제를 간단한 여러 문제로 나누어 푸는 동적 계획법의 핵심이 되는 기술로 알려져 있다. 리액트에서 메모이제이션은 최적화의 동의어다. 처음 렌더링 후 다음에 리렌더링 되었을 때 값이 바뀌지 않았다면 다시 계산해 새로 그리지 않고 기존 값을 그대로 내놓기 때문. 컴퓨터가 다시 계산하지 않고 바로 결과값을 나타내니 사용자 입장에선 굉장히 빠른 피드백을 받는 듯하다. 리액트 훅 useMemo를 통해 간단히 살펴볼 수 있다. const aaa = Math.random(); console.log(aaa); con.. 2022. 10. 26. Curring 커링(curring). 고차함수 계열 기법의 하나다. 인자가 여러 개인 함수의 일부 인자를 고정시키고 새로운 함수를 만드는 방법이다. 조금 더 설명하자면, 함수 인자가 n개라면 함수도 n개로 분리해 사용하는 것. 말로 들으면 이해하기 어렵다. 수포자였던 필자도 말만 듣고는 한 번에 이해하지 못했다. 코드로 먼저 살펴보자. // 이 코드를 function helloFunc(word, name) { console.log(`${word}, ${name}`); } // 이렇게 바꿨다. function helloFunc(word) { return function (name) { console.log(`${word}, ${name}`); }; } 위 코드를 보자. word, name을 인자로 받은 코드를 word .. 2022. 10. 26. Optimistic-UI 옵티미스틱 UI(Optimistic-UI)는 멘털 모델 중 하나다. 인터페이스 형태를 말하는 게 아니다. API와 통신 중 UI를 그려내는 과정에서 모든 것을 낙관적으로 보고 UI를 먼저 그리는 모델이다. 다시 정리하자면, 옵티미스틱 UI는 모든 API 통신이 성공할 것이라 여기고 화면에 먼저 결과 값을 그리는 것을 말한다. 5G 시대에도 필요? 우리는 언제부턴가 인터넷 속도가 느려서 힘들어하는 경우가 많이 사라졌다. 서버 통신을 낙관적으로 보고 UI를 먼저 그려야하는 일이 없어 보인다. 결론부터 말하자면 옵티미스틱 UI은 필요하다. 옵티미스틱 UI 장점은 빠른 피드백이다. 우리 주변에서 흔히 볼 수 있는 결과 중 하나로 페이스북 버튼의 좋아요가 옵티미스틱 UI로 이뤄져 있다. 사용자가 좋아요 버튼을 계.. 2022. 10. 25. 이전 1 2 3 4 다음
