scss -> styled component 변환, footer 컴포넌트화, 버그수정 2개 #24
Conversation
There was a problem hiding this comment.
고생 많으셨습니다!!
1번은 아래에 footer.js 에 답변 남겼고 나머지에 대해 리뷰 남길게요!
2. 동적으로 생성되는 div 에 styled-componets를 적용하지 못했다는 말을 이해하지 못했어요! 동적으로 생성된다는 것이 어떠한 data를 기반으로 그 데이터를 기반으로 DOM 객체를 새롭게 생성한다는 말일텐데, 생성하는 로직에 styled-component 를 쓰면 된다고 생각해요! 이 부분은 다시 전달 부탁드릴게요
3, 4은 인지 했습니다! 좋은 것 같아요!
| <AppDiv className="app"> | ||
| <Loading /> | ||
| <SearchBox /> | ||
| <SearchResult /> | ||
| <Footer /> | ||
| </AppDiv> |
There was a problem hiding this comment.
App 내부에 AppDiv 가 있는 것이 어색한 것 같아요! 이제 React 컴포넌트와 styled 컴포넌트를 활용하기 때문에 아마 className을 저희가 명시적으로 지정할 일이 거의 없을 것 같아요!
저는 AppDiv가 불필요하다고 생각됩니다.
| <SearchResult /> | ||
| <Footer /> | ||
| </div> | ||
| <> |
There was a problem hiding this comment.
ThemeProvider가 전체를 감싸고 있기 때문에 불필요할 것 같습니다!
| @@ -0,0 +1,20 @@ | |||
| import { FooterDiv, FooterTitle, FooterInAnchor } from '../footer'; | |||
There was a problem hiding this comment.
styled component 를 import 해서 다른 곳에서 사용하는 형태가 styled component의 취지를 해진다고 생각해요!
각 컴포넌트에 종속적으로 만들려고 사용하는 것인데, 이러면 여러 컴포넌트에 종속이 되기 때문에 어색하다고 생각이듭니다.
또한 Footer 라는 작은 컴포넌트 하나를 위해서 6개의 파일이 생성되어있는데, 이러한 구조가 맞는지? 더 간단하게 설계할 수 없을 지 생각해보는 것이 좋을 것 같아요!!
|
|
||
| export default function CopyRight({ repoLink }) { | ||
| return ( | ||
| <> |
There was a problem hiding this comment.
큰 상관은 없지만 전체를 감싸는 노드가 있다면 불필요한 구문인 것 같네요!
| <Repo repoLink={repoLink} /> | ||
| <Issues repoLink={repoLink} /> | ||
| <Contributor /> | ||
| <CopyRight repoLink={repoLink} /> |
There was a problem hiding this comment.
질문 남겨주셨던
footer의 경우 각 component에 {repoLink}라는 props를 넘겨주는 형태인데, 이것을 전역으로 관리하거나 한번에 보내주는 방법은 없을까요? <ThemeProvider>의 {theme}처럼 사용하고 싶습니다.
에 대해서 답변을 드릴게요!
제 생각에는 repoLink는 상수값이기 때문에 props 보다는 `const REPO_LINK = 'https~~' 로 다른 곳에 선언을 해두고 import 해서 사용하는 것이 더 간단한 방법일 것 같아요!
ThemeProvider의 theme은 styled component 내부에서 사용될 props를 위해 사용되는 것인데 repoLink는 styled componenet가 아닌 그냥 React component를 위해 사용되는 것으로 보입니다!
만약 스타일적으로 링크 텍스트를 활용할 일이 있다면 theme.js 의 theme 객체에 속성으로 추가하면 될 것 같습니다!
| width: 320px; | ||
| `; | ||
|
|
||
| const FileListContainer = styled.div` |
There was a problem hiding this comment.
해당 컴포넌트 내요이 매우 많은데, 이 부분이 저희 DOM 구조가 잘못 짜여져 있거나, 로직에서 불필요한 참조들이 많기 때문이라고 생각해요!
file-list 라는 클래스를 직접적으로 참조하는 것이 아니라 file-list 별개의 컴포넌트로 제작이 되어야한다고 생각합니다! 이를 위해서는 많은 리팩토링이 필요해보이네요
| const setSolutionInfo = useSetRecoilState(solutionState); | ||
| const setLoadingState = useSetRecoilState(loadingState); | ||
|
|
||
| const setSolutionNo = useSetRecoilState(solutionNoState); |
There was a problem hiding this comment.
회의 때 이야기 했었지만 전역상태가 아닌 해당 컴포넌트에서만 쓰이는 상태로 변경이 필요해보입니다.
| level => ` | ||
| <ul class= "file-list ${`level-${level}`}"> | ||
| <div class="levelTitle">[level ${level}]</div> | ||
| ${fileList[level] | ||
| .map( | ||
| (file) => | ||
| file => | ||
| `<li class="file-list-item ${`${file.name}`}">${file.name | ||
| .slice(0, file.name.length - 3) | ||
| .replaceAll("-", " ")}</li>` | ||
| .replaceAll('-', ' ')}</li>`, | ||
| ) | ||
| .join("")} | ||
| </ul>` | ||
| ).join("")) | ||
| .join('')} | ||
| </ul>`, |
There was a problem hiding this comment.
이 부분이 복잡하게 된 것도, 위에서 말씀 드린 것과 마찬가지로 file-list라는 녀석을 직접 만들어주려고 하고 있기 때문인 것 같아요! 로직을 수정하면 이 부분도 자연스럽게 간단하게 바뀔 것이라고 생각됩니다!!
| background-color: transparent; | ||
| padding: 0 6px; | ||
| border-radius: 15px; | ||
| `; | ||
|
|
||
| export default function SearchResult() { | ||
| const [{ fileName, solution }] = useRecoilState(solutionState); |
There was a problem hiding this comment.
setter 함수를 필요로 하지 않는다면, useRecoilState 대신 useRecoilValue를 활용해보세요!
const {fileName, solution} = useRecoilValue(solutionState)
| className={ | ||
| solutionNo < solution.length - 1 | ||
| ? 'btnSolnMove' | ||
| : 'btnSolnMoveInactive' | ||
| } |
There was a problem hiding this comment.
이제는 styled-component를 사용하기 때문에, className을 변경하는 것이 아니라, props를 활용하여 스타일을 변경 시키는 것이 더 적절할 것 같습니다.
변경사항
<ThemeProvider>를 추가하여 전역으로 theme를 사용할 수 있도록 함궁금한점
<ThemeProvider>의{theme}처럼 사용하고 싶습니다.min-width: 2500px; width: 100%;