[4주차] 김선영 미션 제출합니다. #20
Conversation
|
안녕하세요, 프론트 파트장 주효정입니다🙌 항상 생각한 거지만 중첩 라우팅도 사용하시고 코드를 효율적으로 잘 짜시는 것 같아요! 그리고 Key Question에 대한 답도 너무 깔끔하게 잘 작성해주셨네요~! 한 가지 말씀드리고 싶은 점은 변수/함수를 선언할 때 컴포넌트 내에 있어야 하는 것과 컴포넌트 밖에 있어도 되는 것을 구분하는 것에 대해 학습해봐도 좋을 것 같아요. 예를 들어 이번주도 수고 많으셨고 스터디 시간에 뵐게요🥳 |
src/App.tsx
Outdated
| <Route element={<Layout />}> | ||
| <Route path="/" element={<FriendPage />} /> | ||
| <Route path="/chatrooms" element={<ChatroomPage />}> | ||
| <Route path=":id" element={<Chatroom />} /> |
src/components/InputForm.tsx
Outdated
| onConcat(value); | ||
| setValue(""); | ||
| // 엔터로 전송, shift+엔터로 줄바꿈 | ||
| const handleEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => { |
There was a problem hiding this comment.
우와 shift 엔터 줄바꿈 기능은 생각을 못했는데 ...! 이렇게 구현하는 것이군요!!!! 배워갑니당
src/App.tsx
Outdated
| const App = () => { | ||
| return ( | ||
| <> | ||
| <GlobalStyle /> |
There was a problem hiding this comment.
app.js에 routing을 하셨네용 전 index.tsx에서 해서 app.tsx에서 하는법을 알고 싶었는데 이 기회를 통해 보고 갑니다! globalstyle적용을 아직 안했는데 선영님은 하셨군요!
src/common/customHooks.tsx
Outdated
| const roomMembers: User[] = []; | ||
| chatrooms[roomId].users.map((memberId) => roomMembers.push(users[memberId])); | ||
| if (!includeCurUser) { | ||
| roomMembers.shift(); |
There was a problem hiding this comment.
배열 맨 앞에있는요소를 삭제하는게 shift라는것을 처음 알았어요! 다음에 코드 짤때 써먹어야 겠어용
| curUser: number; | ||
| chats: Chat[]; | ||
| users: User[]; | ||
| } |
There was a problem hiding this comment.
interface선언 파일이 따로 있는데 여기다가 인터페이스를 선언한 이유가 따로 있으신가요???
| if (value.length == 0) { | ||
| return; | ||
| } | ||
| e?.preventDefault(); // 버튼을 통한 제출이라면 새로고침 방지 |
There was a problem hiding this comment.
저도 선영님이랑 비슷한 코드를 짯고 form에 onSubmit했는데 버튼을 통한 제출일때랑 그냥 엔터일때랑 구분을 안하고 짜도 제대로 작동하더라고요! 버튼을 누르면 새로고침이 되는 문제는 없었어요! 그런데 위에 handleEnter라는 함수를 선언하셔서 이런 예외처리가 필요해진건가요??
https://react-messanger-16th-ebon.vercel.app/
Routing
: 웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것
SPA
: 한 개의 페이지로 이루어진 애플리케이션
상태관리
Props는 컴포넌트간 전달 되는 데이터State는 컴포넌트 안에서 관리 되고 시간이 지나면서 바뀌는 동적인 데이터지역 상태전역 상태UI 상태서버 캐시 상태Form 상태URL 상태