[React/Front] CSS Scoping in React / CSS 적용범위

CSS를 사용하면 강제적으로 프린터의 레이아웃을 고정시킬 수 있다.

바로 아래와 같은 형태의 코드를 사용하면 된다.

@media print {
    @page {
        size : landscape
    }
}

 

 

 

 

 

본래 Chrome에서 프린트를 하게 되면 이전에 프린트했던 옵션을 기억하고 있어 그대로 사용할 수 있다.

 

하지만 여기서 size옵션에 portrait나 landscape를 주면 레이아웃을 세로 혹은 가로로 고정시킨채로 출력 Prompt를 불러올 수 있다.

 

레이아웃 뿐만 아니라 페이지의 크기(inch단위), 출력할 용지의 크기(B4, A4 등..) 도 적용하여 출력할 수 있으니 관심있으신 분들은 아래 공식 Document를 참고하길 바란다.

 

https://stackoverflow.com/questions/72853030/print-only-targeted-page-horizontally-in-react-native

Print only targeted page horizontally in React Native

 

 

 

 

 

작업하고 싶은 방향은 이러했다.

1. 버튼을 누르면 출력 prompt가 나온다. (크롬에서 인쇄를 누르면 나오는 작은 팝업 창)
2. 출력 prompt에 레이아웃이 미리 "가로"로 설정되어 있다.

 

출력하고자 하는 페이지가 only 가로로만 출력되는 상황이여서 user 사용성을 고려했을때 미리 가로로 고정된 편이 필요하다고 판단했기 때문이다. (이게 그렇게 큰 파장을 불러올 줄 몰랐지)...

 

 

 

 

 

 

그래서 해당하는 코드를 style.css라는 파일에 넣고 적용을 원하는 파일에 삽입해주었다.

< PrintView.js >

import './style.css';

class PrintView extend Component {
    render {
       return ( <Button onClick={()=>window.print()}> 프린터 </Button> );
    }

이렇게 하면 국소적으로 적용이 될 줄 알았다!!

 

 

 

 

 

PrintView.js	PrintView2.js	PrintView3.js
style.css

풀어서 설명하자면 적용하고 싶은 파일인 PrintView에만 style.css를 삽입했으므로 PrintView2, PrintView3에는 해당 CSS가 적용되는 일 없이 브라우저에서 기억해놓은 옵션으로 출력 Prompt가 나타날 줄 알았다.

 

하지만 아니였다... CSS는 삽입되는 위치와 상관없이 Global하게 적용된다.

 

즉, 한 프로젝트 안에 어디에든 한번만 선언된다면 그 폴더안에 존재하는 화면들이 영향을 받는다 이말이다. 심지어 브라우저에 해당 옵션이 한번 적용되어 출력된다면 브라우저는 앞으로 그 옵션을 계속해서 기억할 것이므로 추후에도 계속 영향을 받게된다.

 

정말 사소하지만 큰 영향을 미치는 개념이다.

 

 

 

 

위에 해당하는 개념을 자세하게 설명해 놓은 블로그가 있어 소개한다.

https://www.upbeatcode.com/react/css-scoping-in-react-everything-you-need-to-know/#:~:text=By%20default%2C%20CSS%20in%20React,class%20names%20for%20every%20component.

CSS Scoping in React - Everything You Need to Know

 

 

 

 

 

위 블로그에 따르면 원하는 Component에만 해당 CSS를 적용하기 위한 방법은 3가지 정도가 있다

1. inline CSS 사용하기
2. [ ].module.css 사용하기
3. react scoped css라는 라이브러리 사용하기

1번 방법은 const styles = { }를 선언하여 클래스의 style에 직접적으로 꽂아넣는 것이다.

 

2번 module을 사용하는 방법은 react에서 제공하는 방법을 이용하는 것으로 조금 더 깔끔하고 재사용이 필요하다면 추천하는 방법이다.

 

개인적으로 라이브러리로 모든 문제를 해결하는 방법은 바람직하다고 생각하지는 않아서 3번 방법은 시도해보지 않았다. 자세한 구현법이 궁금하다면 위 블로그를 참고해 보시길 추천드린다.

 

 

 

 

https://stackoverflow.com/questions/72853030/print-only-targeted-page-horizontally-in-react-native

Print only targeted page horizontally in React Native

나는 그 어떤 방법으로도 ㅠㅠ 프린터 레이아웃 고정 범위를 축소할 수가 없어서 일단 해당하는 기능은 뒤로 미뤄 놓았다. 정말 방법을 알고 싶어서 stackoverflow에 질문도 올려 놓았지만 아무도 대답해 주지 않았다 ⭐

 

혹시라도 방법을 알고 계신다면 조심스럽게 댓글을 부탁드려본다. (미리 감사합니다🙇‍♀️)

 

 

 

 

모두들 CSS로 인해 불상사가 일어나지 않길 바라며 오늘 포스팅을 마무리하겠다.