동적 인라인 스타일 설정하기
아무 입력값 넣지 않을 때에도 스타일링되어 요소가 등장하는 것을
입력된 것이 없을 때(trim한 뒤의 입력값 길이가 0)에는 아무 것도 나타나지 않게 그냥 return
이 상황(사용자가 유효하지 않은 값을 입력)에서의 사용자에게 보내는 피드백 스타일링.
가장 쉬운 방법은 레이블에 인라인 스타일을 추가.
입력값이 유효한지 판단할 state를 하나 만들고 그것의 값에 따라 유효하면 검정색 라벨이 되고, 유효하지 않으면 빨간색 라벨이 되게 style 속성을 이용하여 인라인으로 스타일링했다.
여기서 다시 신경써볼 문제는
1. 위의 스타일링이 리셋이 되는 것
2. 인라인 스타일링은 CSS에서 우선 적용되므로 우리가 설정한 모든 스타일을 오버라이드할 것
1.
2. invalid 클래스를 동적으로 추가해서 CSS 스타일링이 동적으로 적용될 수 있도록 작업할 수 있다.
인라인 스타일링을 코드에서 삭제하니 후순위로 밀려있던 원래의 CSS 스타일링이 다시 잘 적용되는 것을 볼 수 있고,
클래스명을 동적으로 작동(조건부)하게 함으로써 인라인 스타일이 아닌 CSS로도 스타일링이 잘 되는 것을 볼 수 있다.
스타일을 적용하는 컴포넌트의 범위를 정하는 조건적이며 동적 두 가지 접근법
1. Styled Components(스타일드 컴포넌트)
: 3rd party 라이브러리, 고유한 범위를 가진 스타일로 미리 스타일이 지정된 컴포넌트를 설정할 수 있다.
2. CSS Modules(CSS 모듈)
1. Styled Components
https://styled-components.com/
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾
styled-components.com
특정 스타일이 첨부된 컴포넌트를 만드는 것을 도와주는 라이브러리로, 자신 외에는 다른 컴포넌트에는 이 스타일이 전혀 영향을 미치지 않게 한다.
개발자도구에서 요소를 확인해보면 클래스명이 랜덤하게 두 개로 구성되어 있는 것을 확인할 수 있는데,
이것은 styled-components 패키지에 의해 동적으로 생성된 클래스명이어서 그렇다.
위와 같이 모든 클래스는 고유한 이름을 갖게 되기 때문에 앱의 다른 컴포넌트에 영향을 주지 않게 된다 !
위와 같이 스타일드 컴포넌트에서 조건부 렌더링을 위한 동적 클래스명 작업하는 방법이 있고,
또 다른 방법은
아래와 같이 스타일드 컴포넌트에 props를 추가해서 스타일드 컴포넌트의 백틱 안에서 그 props를 변수로 사용할 수 있다 !
이렇게 되면 invalid 클래스명으로 CSS 스타일링한 부분들은 다 삭제해도 되게 스타일링을 정리할 수 있다.
또한 위와 같이 스타일드 컴포넌트 내에 미디어쿼리도 작성이 가능하다 !
2. CSS Modules
https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
Adding a CSS Modules Stylesheet | Create React App
Note: this feature is available with react-scripts@2.0.0 and higher.
create-react-app.dev
리액트 프로젝트는 기본적으로 CSS 모듈스를 지원하도록 설정되어 있다.
기본적으로 같이 설치되어 있는 CSS 모듈이 작동하도록 css 파일 이름 중간에 .module을 넣어 파일명을 작성해주고,
CSS 모듈을 임포트해 사용하고 싶다면, classes나 styles라고 임포트해야 한다 !
사용하고자 하는 클래스명에 문자열을 넣는 대신 css파일에서 임포트하고 있는 styles 객체를 참조해 동적인 값으로 작성할 수 있다. 임포트하고 있는 css 파일 내의 클래스명들을 프로퍼티로 가질 수 있게 되는 것이다 !
위에서는 .button이 사용되는 css 파일을 임포트하고 그것을 위와 같은 방법으로 프로퍼티로 갖는 것이다.
위의 styles.button 은 (CSS 모듈을 통해)동적으로 만들어진 클래스명과 컴포넌트를 연결하는 방법인 것이다 !
개발자도구의 요소에서 마찬가지로 버튼 요소를 확인해보면,
위의 새롭게 생성된 클래스명은 많은 정보를 담고 있는 형태인데,
"컴포넌트 이름_클래스 이름__고유한 해시값"의 구성으로 이루어져 있는 것이다 !
컴포넌트 이름과 클래스 이름은 내가 지은 것이고, 해시값은 CSS 모듈이 자동적으로 부여한 것이다.
CSS 모듈이 하는 일 또는 개념, 내부에서 내장 프로세스가 하는 일은
css 클래스와 css 파일을 가지고, 그 클래스 이름을 기본적으로 고유하게 바꾸는 것 그것이 핵심작업이다.
개발자도구 요소의 <head>에서도 style 요소를 열어보면 button 스타일이 CSS 모듈에 의해 부여된 고유한 클래스명으로 확인되고 있다.
CSS 모듈의 개념은 css 파일에서 설정한 스타일의 범위가 이 파일을 임포트하는 컴포넌트에 한정되게 설정한다는 것이다.
조건부(invalid) 스타일링을 위해 위와 같이 템플릿 리터럴로 복합 클래스명이 작성될 수 있도록 했고, isValid가 false일 때, styles.invalid이 적용되도록 하였다.
CSS 모듈에서 미디어 쿼리를 설정하는 방법은 다음과 같다.
CSS 모듈을 임포트해온 별명 styles의 속성으로 css에서 사용하는 클래스명을 요소의 클래스명 작성
+ css 모듈 파일에 미디어쿼리 작성
(working on..)
'KDT TIL Note > React' 카테고리의 다른 글
| [막시밀리언] 리액트 State 및 이벤트 다루기 (0) | 2023.02.16 |
|---|---|
| [막시밀리언] 리액트 기초 및 실습 컴포넌트 35강~48강 (0) | 2023.02.15 |
| [StephenGrider 강의] 모던 리액트와 리덕스 - state in 클래스기반 컴포넌트 (0) | 2023.02.07 |
| [StephenGrider 강의] 모던 리액트와 리덕스 - 개발환경 설정 (0) | 2023.02.03 |
| [winterlood 강의] React App 만들기 note (0) | 2023.01.20 |
