[TIL-010] 리액트 라우터(Router), 기술 매니저님 질문/응답 정리

Today목표 : 4/20일 리액트 라우터(Router), 기술 매니저님 질문/응답 정리

---

알게된 점,

 

리액트 라우터(Router)✅

리액트 라우터를 공부하면서 정리한 내용을 포스팅하였다.

[React] React-router-dom이란 무엇인가?

 

기술 매니저님께 질문 / 응답✅

1. SCSS 등에서 컴포넌트의 타입에 따라 스타일을 다르게 적용시키는 방법

먼저 todo-list에서 사용했던 방식으로 className에 inline으로 적용했을 경우, 가독성이 굉장히 많이 떨어진다는 생각이 들었다. 따라서 외부 switch 문 등을 사용 하거나 해서 적용시켜야 하는지 고민했었는데, 예전에 switch문을 사용해본 결과, 계속해서 type이 늘어날 수록 switch문이 길어지고, 값에따른 스타일을 적용시켜 줘야 하는 문제점이 있었다. 더 효율적인 방법이 없을까 궁금해질문드렸다. 또 이런 상환에는 styled-component가 훨씬 사용하기 쉬울 것 같은데 둘을 병행해서 사용해도 되는지 질문 드렸다.

=> 일단 둘을 병행하는 것보다는 하나를 사용하는게 좋긴하지만, 필요에 따라 굳이 필요하다면 사용을 아예 못하는건 아니다. className에 inline으로 적용하는건 가독성에 좋지 않고, 로직을 따로 두어 관리하는 것이 좋다. switch문을 사용해도 되나 다른 중복되는 부분도 적용해야 하기때문에 추천하지는 않고, 외부에서 별도로 type을 주면 스타일을 return하는 함수라던지, 객체 식이라던지 등등 stype에 맞는 스타일을 반환할 수 있도록 하면 좋을 것 같다.

=> type에 따라 클래스 네임을 맵핑하고 클래스 네임에 따른 스타일을 주셔도 되는데요.
타입의 종류가 많아질 것 같다고 하시면 컴포넌트 props로 스타일을 직접 주입할 수도 있습니다.
이 방식은 React.CSSProperties라는 키워드로 검색해보시면 도움이 되실거예요 :)

 

2. styled-component에 대한 코드 리뷰

=> 일단 내가 짠 코드 방식으로 모든 태그를 styled-component로 생성할 필요는 없고, 이런 식으로 div마다 container기준으로 하위 태그로 하게끔 작성해도 된다. 다만 리액트에서는 보통 작은 컴포넌트단위로 별도 모듈로 만들어 import하는 방식을 추구한다. => 이렇게 사용하면 중복되는 styled 코드들도 줄일 수 있다. styled-component를 모듈화하여 사용하는 방법에 대해 공부해 봐야 겠다.

 

3. Redux를 이용해 상태관리를 할 때, state를 변경하는 로직은 사용부(컴포넌트)에서 가공해서 payload로  하는지? 아니면 state module에서 return할 때 작성해야 하는지?

=> 어디서 해도 상관은 없다. 다만 질문한 부분에서는 사용부에서 아예 데이터를 가공해 payload로 보내게 되면, 불필요한 todos의 데이터들을 가져와야 하기 때문에 굳이 사용부에서 가공하기 보다는, return되는 부분에서 가공하여 return 하면 될 것 같다.

 

 

배운 점, 아쉬운 점

내일은 면접 스터디 발표날인데 주제가 리액트 라우터다.

1. 중첩 라우팅에 대해 완벽히 이해하지 못한 것 같아 내일 다시 한 번 공부해 봐야겠다.

아직 실습을 해보지 않아 router의 기능을 어떨 때 잘 사용해야 할지 완벽히 감은 안온다. 내일 과제를 수행하면서 라우터와 같이 모달창을 만들면서 연습해야겠다.

2. CSS 라이브러리를 사용하는 방법이 미숙한 것 같다. 다음 프로젝트 때는 styled-component를 모듈화하여 외부에서 import 하여 사용하는 방법과, type에 따라 style을 다르게 적용하는 방법을 기술매니저님이 말씀해 주신 부분을 참고하여 적용해 봐야겠다.