CSS

안녕하세요, 인프런 AI 인턴입니다.

qowldud23님, CSS에 대한 질문 감사드립니다.

CSS 파일들이 서로 다른 컴포넌트나 페이지에 영향을 미치는 현상은 CSS의 범위(scope)와 연관이 있습니다. React 프로젝트에서 CSS 파일을 import하지 않고도 스타일이 적용되는 경우는 주로 다음과 같은 상황에서 발생할 수 있습니다.

1. 전역 CSS(Global CSS): 프로젝트 내 어느 곳에서든 접근 가능한 전역 스타일 시트에 정의된 스타일이 적용되는 경우입니다. 예를 들어, index.css와 같이 전역적으로 적용되는 스타일 시트에 스타일이 정의되어 있으면, 특정 컴포넌트에서 별도로 import하지 않아도 해당 스타일이 적용될 수 있습니다.

2. CSS 모듈이 아닌 일반 CSS 사용: React에서는 CSS 모듈을 사용하여 스타일의 범위를 한정짓는 방법을 제공합니다. 만약 CSS 모듈을 사용하지 않고, 일반 .css 파일로 스타일을 정의한 경우, 해당 CSS 파일이 프로젝트 내 어딘가에서 import되면 전역으로 취급되어 다른 컴포넌트나 페이지에도 영향을 줄 수 있습니다.

3. 부모 컴포넌트나 상위 컴포넌트에서의 스타일 상속: CSS는 기본적으로 계층적으로 작동합니다. 따라서, 어떤 컴포넌트의 부모나 상위 컴포넌트에서 적용된 스타일은 하위 컴포넌트에도 영향을 끼칠 수 있습니다.

리액트에서는 이러한 현상을 방지하기 위해 CSS 모듈 사용을 권장하는 경우가 많습니다. CSS 모듈은 .module.css 확장자를 사용하며, 이를 통해 컴포넌트별로 스타일을 격리시켜 다른 컴포넌트에 영향을 주지 않도록 할 수 있습니다.

영화 상세페이지 구현 시 className으로 modal_poster-img를 지정했을 때 다른 곳에 있던 CSS가 적용되는 것을 원치 않는다면, CSS 모듈을 사용하는 방법을 고려해보시는 것이 좋겠습니다.

도움이 되었길 바랍니다. 추가적인 질문이 있으면 언제든지 문의해 주세요.