프론트엔드 개발자 엄성준 블로그

type UserInfoState = { id: string; passWord: string; }; type UserInfoAction = | { type: "setId"; payload: string; } | { type: "setPassWord"; payload: string; }; 기존에는 useState hook을 활용해서 로그인이나 회원가입할 때 입력 된 정보를 관리했었는데 실무에서 배운 useReducer방식에 대해서 작성해 볼까 합니다. 먼저 reducer함수를 생성해줘야 합니다. 또한 타입스크립트를 이용했기 때문에 state와 action의 type을 지정해줘야 합니다. function reducer(state: UserInfoState, action: UserInfoAction) { sw..

오늘은 login과 join을 할 때 데이터를 빽엔드로 보내줄 form 데이터를 로그인 버튼이나 회원 가입 버튼을 눌렀을 때 정보가 잘 뜨는지 테스트를 해보고 구축해보았습니다. export default function Login({show, setShowLoginModal}: PaymentModalProps) { const [joinForm, setJoinForm] = useState(false) const [joinWelcomeText, setJoinWelcomeText] = useState('Compass에 오신 것을 환영합니다.') const loginEmailRef = useRef(null) const loginPasswordRef = useRef(null) const joinWelcomeTex..