본문 바로가기

전체 글168

[React] 카카오 주소찾기 api 사용하기 과제를 하면서 알게 되었는데 리액트에서는 생각보다 간편하게 사용할 수 있다. 간편 정리 1. react-daum-postcode 설치하고 2. 원하는 곳에 import 하고 3 임포트해온 컴포넌트를 배치하고 원하는 상황에 맞는 prop를 넣어서 한다.(해당 내용 아래 참고자료에있음) npm install react-daum-postcode # or yarn add react-daum-postcode 우선 이걸 깔고, 원하는 위치에 임포트하면 된다. 나 같은 경우는 input창을 클릭했을 시에 이 주소찾기 페이지가 떠야 했다. 처음엔 주소입력 컴포넌트에 하위에 넣었는데, 모달로 하는게 나을 것 같아서 모달로 띄우게 했다. 포탈 사용해서 그냥 띄우고싶을 때 컴포넌트 내에서 띄울수 있도록 했다. const S.. 2023. 2. 20.
[React] 리액트에서 조건에 따라 동적 import하기 같은 모달을 수정/ 등록 할 때 같이 쓰고 있기 때문에 어떻게 통신을 할까, 모드에 따라 해야할 것 같은데 따로 빼는게 좋을까 아님 두개 다 불러오고 해야하는걸까 이리 저리 고민을 많이 했다. 그러다가 동적 임포트가 기억이 났고 검색을 통해 커스텀 훅을 구현하였다. 처음에는 React.lazy도 컴포넌트를 동적으로 import를 할 수 있다고 해서 검색해 보다가 컴포넌트만 적용되는 듯 하고(정확하진 않음), export default만 가능하다고 해서 다른 방법을 찾아봤다. import()는 promise로 반환된다고 해서 아래와 같이 async 함수 내에서 await 처리하였다. 모드(얘도 다른 훅에서 받아온다)가 변경될 때 동적으로 원하는 모듈을 임포트 할수 있도록 했다 import { Request.. 2023. 2. 10.
[JS] form submit시 formData 객체로 받아서 객체로 변환하기 커스텀 훅을 만드려다가 알게 되었는데, 처음 커스텀훅에 input의 id값을 배열로 받아서 forEach나 for문을 돌려 값에 대한 validation을 하려고 했다. 근데 formData가 버젓이 있는데 굳이 그럴 필요없이 방법이 있지 않을까 싶어서 찾아보던 중 알게 되었다. 우선 콘솔로 찍어보느라 그냥 함수를 실행했는데 나중에 변경할 예정이다 const submitHandler = (e: FormEvent) => { e.preventDefault(); getFormData(e.currentTarget)//여기서 e.CurrentTarget을 사용해 form element }; 여기서 바로 FormData해서 FormData 객체를 만들어도 되지만, 나는 따로 함수로 빼서 했다 const getFor.. 2023. 2. 9.
230205 리액트 라우터의 useSearchParams 와 유사한 커스텀 훅을 만들고싶었다. 근데 작동을하지않네.... 커스텀 훅 자체에서 바로 searchParams를 받아서 하고싶었는데, 렌더링이 되지 않음을 확인했다. 그래서 전역 상태관리 라이브러리인 recoil을 사용해 selector를 하나 만들어서 searchParams변수에서 window.location.search를 받아오게 했는데 생각해보니 상태가 아니기때문에 새로 초기화되잖아!! 좀 답답해져서 리액트라우터 깃허브에 갓다와서 힌트좀 얻어야겠다. 이거로 계속 씨름중.... import { useRecoilState } from 'recoil'; import { useEffect, useState, useRef } from 'react'; import.. 2023. 2. 5.

티스토리툴바