[4주차] 정희수 미션 제출합니다. #16
Conversation
|
안녕하세요, 프론트 파트장 주효정입니다🙌 배포링크에 있는 캐릭터들 너무 귀엽네요,,, TMI지만 저는 어릴때부터 지금까지 짱구가 최애 캐릭터입니다😆 이번주도 수고많으셨고 스터디 시간에 뵐게요~!👍 |
| return ( | ||
| <StyledItem to={chatLink}> | ||
| <StyledBox> | ||
| <StyledImage width={"45px"} height={"45px"} src={src}/> | ||
| {name} | ||
| <StyledFontBox> |
There was a problem hiding this comment.
큰 styled component 안에 있는 요소들은 선택자로 관리하시면 굳이 새로운 styled component 만들지 않으셔도 돼요!.!
| @@ -28,7 +28,7 @@ function FriendItem({id,name,src,number}:FriendItemProps){ | |||
| </StyledItem> | |||
| <hr/> | |||
| <StyledFont> | |||
| 친구 {number} | |||
| 친구 {number-1} | |||
| "to":0, | ||
| "content":"난 뚱이", | ||
| "date":"02:21" | ||
| } |
There was a problem hiding this comment.
희수님이 코드리뷰 남겨주신대로 저랑 이 부분이 조금 다르군요..!
저는 기존 과제에서는 concat을 사용했고, 이번 과제에 roomId를 추가하면서 concat 사용이 힘들었는데, 희수님처럼 구현하면 제가 저번 과제 했던 것 처럼 concat을 쉽게 사용할 수 있었겠네요! 방법하나 알아갑니다 👍
| <Header/> | ||
| <StyledContent> | ||
| 친구 | ||
| <StyledButton onClick={onClick}>🔍</StyledButton> |
There was a problem hiding this comment.
const [search, setSearch] = useState(false);
<StyledButton onClick={() => setSearch((prev) => !prev)}>
이렇게 해주면 onClick 함수를 따로 작성하지 않고 구현할 수 있을 것 같습니다.!
| <StyledButton onClick={onClick}>🔍</StyledButton> | ||
| { | ||
| search === 0 ? | ||
| <Search/> |
There was a problem hiding this comment.
저는 주절주절 한파일에 다 작성했는데 .. Search 컴포넌트를 따로 작성하셨군요.! 저도 이렇게 해야겠습니다..ㅎㅎ 👍
이번에 처음 Recoil을 써봤는데 확실히 코드 짜는데 더 좋았어요! 저번 과제에서는 props 계속 내리고 내리고 올리고 올리느라 코드 짜는데 좀 혼란스러웠는데 Recoil 쓰니까 편하네요.. 왜 React에서 상태 관리가 중요한지 알 것 같습니다.
저는 메세지 json 파일에 저장할 때 room번호를 안 쓰고 from과 to를 모두 써서 저장했는데, 아예 room 번호를 지정해서 각각 저장하신 분도 있더라구요!! 다른 분들은 어떻게 메세지 파일을 관리하셨는지 궁금합니다
코드리뷰 감사합니다!!😀
배포링크
Routing
웹에서 Routing은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것입니다.
React에서 Routing을 할 수 있는 선택지는 두 가지입니다.
이번 과제에서 React Router v6를 사용했습니다.
SPA
SPA는 Single Page Application으로 한 개의 페이지로 이루어진 애플리케이션입니다.
뷰 렌더링을 사용자의 브라우저가 담당하도록 하고, 우선 웹을 브라우저에 불러와서 실행시킨 후에 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트하는 방식입니다. 새로운 데이터가 필요하면 서버 API를 호출해 필요한 데이터만 새로 불러와 애플리케이션에서 사용할 수 있습니다. 이렇게 html은 한번만 받아와 웹을 실행시킨 후에 그 이후에는 필요한 데이터만 받아와 화면에 업데이트 해주는 것이 SPA입니다.
이번 과제에서 React Router를 사용해 Single Page Application을 만들어 봤습니다.
상태 관리
React 어플리케이션에서는 Redux, Recoil, Hooks 등으로 상태 관리를 할 수 있습니다.
이번 과제에서 Recoil과 Hooks를 이용해 상태를 관리해봤습니다.
아래는 Key Questions 작성하면서 참고한 링크입니다!
2021년 React 상태 관리 라이브러리 전쟁 : Hooks, Redux, Recoil