Next js에서의 CSS

Question

안녕하세요 . 현재 Nextjs랑 global.scss(_app.tsx 에 물려있는)로만 프로젝트가 이루어져있는데, 페이지랑, 컴포넌트의 개수가 많아지다보니, 페이지별 또는 컴포넌트별 또는 아예 파일별로 css파일을 분리하려고 합니다. Next js 에서 파일별로 css를 다루기 위해서는, 여러가지 방법 중. index.moduel.css 파일을 생성 . header { // 스타일작성 } index.tsx에서 import styles from ./index.moduel.css //임포트

hello

//스타일적용 이런식으로 사용하는것으로 알고 있습니다. 궁금한것이, 이런식으로 classname을 자체적으로 생성해주면서 , 스타일을 적용하는 방식의 경우에는 document.getElementByClassName 식의 접근은 불가한데, 1. 이를 id나 name으로 대체하고 사용하는 것인지요 ? 2. Next js에서의 파일별로 CSS를 작성하고 싶을때 어떤 것을 사용하고 계신지요?(CSS,SCSS,tailwind,styled component,,,) 두서없이 적은 글 죄송합니다. 도움 주시면 감사하겠습니다.

손정현 · Answer

안녕하세요!

1. 일반적으로 react에서 DOM 요소를 접근할때는 document 대신 useRef라는 훅을 많이 사용합니다. 하지만 document를 꼭 써야만하는 경우가 있을 수 있는데요. 그럴 경우는 말씀하신것처럼 className을 사용하지 못하는 경우도 있어서 id나 name으로 접근하기도 합니다. 어떤 방식을 취할지는 상황에 따라서 달라질 것 같아요.

useRef에 대해서 잘 정리된 벨로퍼트님의 글이 있어서 참고용으로 남깁니다.
- https://react.vlpt.us/basic/10-useRef.html
- https://ko.reactjs.org/docs/hooks-reference.html#useref

이건 제가 다른 분의 질문에 답변한 내용인데, 참고해보셔도 좋을것 같아서 남겨요 :)
- https://careerly.co.kr/qnas/803?fa=notification

2. Next js에서 파일별로 css를 작성하는 방법은 팀마다 다를 것 같네요. 저희 팀은 최근에 tailwindcss를 도입했고 기존에 있던 css와 scss 도 같이 사용하고 있습니다. scss 파일들은 컴포넌트 단위로 나뉘어져있고, index 파일이 되는 한 파일에서 컴포넌트 단위로 나뉜 scss 파일들을 import하고 있으며 실제 앱에서는 index 파일만 import하는 형태로 구성되어 있네요.

오픈소스 프로젝트 코드들을 가끔 살펴보면 css-in-js도 많이 쓰고 있는 것 같아요. styled-components 나 emotion도 많이 쓰는것 같네요. 그치만 단점도 있다고 합니다.
관련해서 이 게시글도 한번 읽어보시면 좋을것 같아요.
- https://careerly.co.kr/comments/71365

커리어리 Q&amp;A 운영자 · Answer

안녕하세요, 해당 질문은 리액트 관련 질문으로 파악되어 토픽이 기술/커리어에서 React로 변경될 예정입니다. 감사합니다!