Dev/miyu #17
Dev/miyu #17
Conversation
Deploying with
|
| Latest commit: |
7cafc51
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://af3e8bab.pick-of-pig.pages.dev |
| Branch Preview URL: | https://dev-miyu.pick-of-pig.pages.dev |
src/app/page.tsx
Outdated
|
|
||
| function Home() { | ||
| console.log(score); // undeFined |
There was a problem hiding this comment.
필요없는 코드인 것 같습니다. 지우는게 좋을 것 같네요
| function HeaderNav() { | ||
| const categoryLists = useRecoilValue(categoryList); | ||
| const [searchAddress, setSearchAddress] = useState(''); | ||
| // 전역변수로 만들고 싶네 |
There was a problem hiding this comment.
전역변수로 하고 싶은 이유를 혹시 알 수 있을까요? 상태 관리가 복잡해질 수는 있겠지만 필요하다면 도입해도 괜찮지않을까 싶습니다.
There was a problem hiding this comment.
SearchBar가 map의 상단과 모달에서도 있어서 컴포넌트화 시킬려고 해서 recoil로 하고 싶다는 거였는데, map디자인 확정되고, 코드 구조좀 바뀔때 다시 한번 볼게...
src/components/HeaderNav.tsx
Outdated
|
|
||
| const openModal = (name: string) => { | ||
| { | ||
| name === 'LeftNav' ? setIsModalOpen(true) : setIsRandomModal(true); |
There was a problem hiding this comment.
setIsModalOpen(name === 'LeftNav' ) 코드가 더 간결해보이네요!
There was a problem hiding this comment.
잠깐 딴거하다 다시봤는데
이경우에 eslint가 Expected an assignment or function call and instead saw an expression. eslint@typescript-eslint/no-unused-expressions를 띄웁니다.
제 생각에, 함수를 실행하는 경우의 조건분기라면,
if (name === 'LeftNav') {
setIsModalOpen(true);
} else {
setIsRandomModal(true);
}와 같이 if문을 쓰는게 좋아보입니다.
| document.addEventListener('mousedown', handleClickOutside); | ||
| // 클린업 함수 ,,? 모르겠음 | ||
| return () => { | ||
| document.removeEventListener('mousedown', handleClickOutside); |
There was a problem hiding this comment.
이 컴포넌트가 지워진 다음, remove를 해줘야 다시 실행되는 일이 없겠죠?
There was a problem hiding this comment.
근데 내가 주석처리하고 해봐도 큰 차이가 없었어!!!
| <SearchComponentContainer id="searchComponent"> | ||
| {optionLists.map((it, index) => ( | ||
| <SearchComponentStyled key={index}> | ||
| <div>{it}</div> |
There was a problem hiding this comment.
Array의 index는 key로 쓰기에 부적합해요!
- Do not use Array index in keyseslintreact/no-array-index-key
- Dom 이 rendering될때, 객체의 순서가 바뀌거나 객체값이 변하면, 데이터를 다루는 컴포넌트도 달라져요.
- 카테고리 자체가 유일하니 카테고리를 key로 쓰는걸로 바꿀게요!
There was a problem hiding this comment.
그럼 index대신에 it 넣으라고 하는거지?
| return ( | ||
| <ListModalStyled> | ||
| <ModalContentStyled ref={modalRef}> | ||
| <SearchBar /> |
There was a problem hiding this comment.
이 컴포넌트에는 필요한 값이 있는 것 같은데, 왜 없는지 혹시 알 수 있을까요?
'{}' 형식에 '{ handleInputChange: (e: ChangeEvent<HTMLInputElement>) => void; handleSearchClick: () => void; searchAddress: string; }' 형식의 handleInputChange, handleSearchClick, searchAddress 속성이 없습니다.ts(2739)
There was a problem hiding this comment.
그거 아직 디자인 fix가 안되어서 SearchBar를 어느 단에서 불러올지 확실하지 않아서 일단 남겼어, 위에 보면 전역변수화 시키고 싶다는 부분이 이거때문이야
이렇게 pr을 하는거였구나