선언적 프로그래밍이란?선언적 프로그래밍이란 무엇을 표현할지에 집중하고 어떻게 할지는 숨기는 개발 스타일이다.UI를 선언적으로 사용할 수 있도록 만들면 당장 몰라도 되는 디테일은 숨겨지고 핵심 정보가 들어나서 로직을 파악하기 쉬워진다. 인터페이스부터 생각하자리액트에서 간단한 alert 컴포넌트를 모달로 띄운다고 가정해보자. 사용처에서 UI 컴포넌트를 import하거나 만들고 isOpen과 같은 상태로 여닫기를 관리해줘야한다.이에 비해 브라우저 내장 Web API인 window.alert()의 사용 방법은 간단하고 선언적이다.alert("Hello world!");어디서나 메시지와 함께 alert 함수를 호출해주기만 하면 창을 띄워준다.이렇게 간단한 방식으로 리액트 컴포넌트도 띄울 수 있도록 만들어보자.co..

❗️ 문제 로그인과 회원가입 페이지의 뷰 컴포넌트를 하나로 사용하고 있었기 때문에 폼이 submit 됐을 때 어떤 페이지에서 렌더링 된 건지에 따라서 서로 다른 API 전송 함수를 서로 다른 props로 보내서 트리거했었다. // submit 되면 실행되는 함수. const onValid = (data) => { if (signUp) { handleSignUp(data); } else { handleLogIn(data); } }; 하지만 하나의 props로 통일해도 된다고 판단했다. // submit 되면 실행되는 함수. const onValid = (data: AuthFormValues) => { handleSubmitForm(data); }; 인자에 대한 타입은 다음과 같다. export interf..

❗️ 문제 로그인, 회원가입 폼에 애니메이션을 트리거하기 위해서 만든 useRef에 타입을 줘야 했다. 본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같다. 처음엔 이런 형태로 타입을 부여했었다. const inputRef = useRef(null); 그런데 인풋의 ref 속성으로 부여된 useRef 값의 current에 접근할 수 없는 문제가 생겨서 그 이유를 살펴보았다. 🔎 원인 useRef 훅은 3개의 정의가 오버로딩되어 있다. 1. useRef(initialValue: T): MutableRefObject; 인자의 타입과 제네릭의 타입이 T로 일치하는 경우, MutableRefObject를 반환한다. MutableRefObject의 경우, 이름에서도 볼..