수업시간에 배운 내용

1. library의 utils 파일 관리
(1) 8일차에서 container - presentation를 분리하여 관리하는 것을 배웠는데, 이처럼 파일을 분리하여 관리하는 것은 협업과 유지보수를 위해 필수이다. (styles에서 발생한 에러는 styles 에서 수정만 해주면 끝.)
(2) 이제 공통적으로 쓰이는 함수를 한곳에 저장하여 협업시에 재사용 하는 방법도 있는데, 그렇게 하면 함수를 한번만 만들어서 import로 가져오면 된다.
(3) 예를 들면 날짜를 표현하는 방법을 모든 페이지에서 동일하게 해주려고한다면, 함수를 하나 만들어서 각각 재사용하면 되는것이다. (예시는 아래 코드 참조)

export const getDate = (date) => {
  const newDate = new Date(date);
  const yyyy = newDate.getFullYear();
  const mm = newDate.getMonth() + 1;
  const dd = newDate.getDate();
  return `${yyyy}-${mm}-${dd}`;
};

이런식으로 날짜를 나오게 만들어 준다면, 사용하고자 하는 페이지에서 import 해준 다음에 바로 사용하면 된다. (사진은 각각 다른 페이지에서 불러오는 모습이다.)

2. 컴포넌트의 재사용
(1) 멘토님께서 강조하면서 말씀해주신 내용으로, 리액트를 사용하는 이유중 하나인 컴포넌트 재사용 부분을 배워보았다.
(2) 앞선 강의 시간에선 상세페이지는 만들었기 때문에 이를 등록페이지, 수정페이지를 만들고, 상세페이지를 임포트 해와서 그 안에 내용만 조금 수정하면 재사용이 가능하다.

(3) 사진을 보게되면 상세페이지를 등록, 수정 페이지에서 임포트 해온 상태이다.

(4) 동작방식은 삼항연산자를 사용하여 isEdit가 false 일때는 등록페이지를, true 일때는 수정페이지를 띄워주게 했다.

(5) 이런식으로 구현이 가능하며, 만약 3개 이상의 페이지를 불러오게 하려면 isEdit= {false} 이 부분을 "등록", "수정" 등으로 바꾸어 각 페이지에서 저 값이 맞는지를 확인 후 그 값을 보여주게 하면 된다.

추가적으로 공부한 내용

1. React- Next Router vs React Router
(1) 공부하면서 알게 된 점은 넥스트가 리액트의 기능을 그대로 가지고 있으면서, 넥스트에만 추가적으로 구현가능한 기능들이 있다는 점을 알게 되었다.
(2) 그 중 큰 차이를 보이는 부분은 Router 부분인데, 넥스트에서는 수월하게 할수 있는 부분은 리액트에서 조금 복잡하다고 한다.
(3) 리액트를 자세히 배워보지 못했기 때문에 리액트 Router 부분을 구글링해보니, 우리가 배우는 라우터와는 다른 모습을 보이는것을 확인했다.

(4) 우리가 배운 동적라우팅 방법으로는 이런식으로 router.push(주소) 해주면 되는것과 다르게 저런식으로 작성을 해야된다고 한다. (좀 불편해보인다..)

(5) 하지만 취업할 곳에서 꼭 넥스트만 쓴다는 보장이 없으니 저런 부분도 공부하면 좋을것 같다.