util 함수: 객체형 return시키기
const dongName = (region: string) => region.split(" ").reverse()[0];
const cityName = (region: string) => region.split(" ").reverse()[1];
- 기능은 함수인데 이름이 함수처럼 느껴지지 않는다는 의견
- 동일한 코드의 중복
export const getLocationName = (location: string) => {
const parseLocation = location.split(" ").reverse();
return { cityName: parseLocation[1], dongName: parseLocation[0] };
};
const { cityName, dongName } = getLocationName(location);
로 사용
- 하나의 util함수로 사용
컴포넌트 분리
- 하나의 컴포넌트에서 위치정보 등록을 받음
- 위치 검색결과가 바뀔 때 마다 기존의 선택결과까지 리렌더링되는 상황
- 리렌더링을 막기 위해 모듈분리하였음
RegisterLocation
∟ index.tsx
∟ RegisterLocation.tsx
RegisterLocation
∟ index.tsx
∟ LocationClickResult.tsx
∟ LocationSearchResult.tsx
∟ LocationInput.tsx
∟ RegisterLocation.tsx
상수관리
- kakaoAPI로 보내는 주소는
Util/API
에서 관리
const API = {
userLocation(locationInput: string) {
return `http://dapi.kakao.com/v2/local/search/address.json?query=${locationInput}`;
}
locationInput
은 HIFI 전용 Key인데, 이것을 현재는 Util/constants
에서 관리하두록 했음
그치만 보안을 생각하면 나중에는 .env파일
에서 관리해야하지 않을까 싶음