feat: 사용자 정보기입 페이지 구현 #10
Conversation
질문자 측의 두 dialog box를 스타일에 따라 변경할수 있게 바꿨습니다
spark-web/src/domains/UserInformation/components/Questionbox.tsx
Outdated
Show resolved
Hide resolved
spark-web/src/domains/UserInformation/components/Footers/SNSGoal.tsx
Outdated
Show resolved
Hide resolved
| function submitOnEnter(e: React.KeyboardEvent<HTMLInputElement>) { | ||
| if (e.key === "Enter") { | ||
| onClick(inputText); | ||
| setIsTyped(); | ||
| } | ||
| } |
There was a problem hiding this comment.
내부안에 이벤트 할당하는 함수는 function 선언식 대신에 함수 표현식으로 작성해주세요!
useCallback 적용하는데 더 좋아요
There was a problem hiding this comment.
혹시 해당 함수가 왜 useCallback을 적용하는게 더 좋다고 생각하셨는지 알 수 있을까요?
해당 함수는 자주 변하는 inputText 상태에 의존적인데, useCallback의 의존성으로 inputText를 설정하면 재생성이 너무 자주 일어나 효용이 떨어지고, 그렇다고 의존성 배열에 입력하지 않으면 해당 상태변화가 적용되지 않는 문제점이 생깁니다
spark-web/src/domains/UserInformation/components/Footers/FulltimeParttime.tsx
Outdated
Show resolved
Hide resolved
spark-web/src/pages/UserInfo.tsx
Outdated
| return <div>UserInfo</div>; | ||
| return ( | ||
| <div> | ||
| <UserInformation /> |
There was a problem hiding this comment.
이렇게 하나의 컴포넌트로 하신 이유가 있으실까요??
한단계 더 타고 들어가야해서 depth가 좀 길어지는것 같습니다!
There was a problem hiding this comment.
기존에 작업하던 곳이 UserInfo라 router가 연결되어 있는곳에 넣어놨습니다
UserInformation을 UserInfo로 대체하여 수정하겠습니다!
| } | ||
| }, [steps]); | ||
|
|
||
| function SheetContents() { |
There was a problem hiding this comment.
컴포넌트 안에 또 컴포넌트로 정의한 이유가 있으신가요?
이렇게 정의하면 리렌더링에 대해서 대응할수 없다는 이슈가 있어서 안티패턴이라고 알고 있어요!
There was a problem hiding this comment.
유용한 정보 감사합니다! userInformation에서 쓰이는 상태가 많아서 컴포넌트 안에서 정의했습니다
분리하겠습니다!
|
|
||
| return ( | ||
| <div className={'px-[20px] flex flex-col'}> | ||
| {steps === 0 ? ( |
There was a problem hiding this comment.
해당 로직은 분기처리가 많이 되어있는거 같아요.
만약에 steps가 더 늘어나면 또 분기처리를 해줘야할것 같은데 이 부분에 대해서 한번 더 고민해봤으면 좋겠어요!
There was a problem hiding this comment.
저도 동의합니다! 두고두고 생각해봐야 할 것 같습니다
spark-web/src/domains/UserInformation/components/Footers/FulltimeParttime.tsx
Outdated
Show resolved
Hide resolved
| GOAL: '', | ||
| }); | ||
| const [isTyped, setIsTyped] = useState<boolean>(false); | ||
| const bottomRef: RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null); |
There was a problem hiding this comment.
RefObject라고 정의하신 이유가 궁금합니다.
There was a problem hiding this comment.
DOM에 접근해야했고 readonly로 충분하기 떄문에 RefObject를 썼습니다
| onClick={() => { | ||
| if (item !== '직접입력') { | ||
| onClick(item); | ||
| } | ||
| setTouched(item !== '직접입력'); | ||
| }} |
There was a problem hiding this comment.
이벤트 정의 함수가 길어지면 가독성 측면에 안좋아요!
따로 빼서 정의하면 좋을것 같아요
이슈 번호
작업한 목록을 작성해 주세요
질문자측 question box 컴포넌트 한개로 만든 후 props에 따라 정해진 스타일 적용 가능하게 구현
전업 부업 선택 컴포넌트 구현
유튜브를 하는 목적 선택 컴포넌트 구현
프로필 구현
메인 화면
새로운 컴포넌트가 렌더링 될때마다 자동적으로 최하단으로 스크롤 되도록 구현
스크린샷
2025-01-26.9.26.28.mov
pr 포인트나 궁금한 점을 작성해 주세요
연관된 issue: #information