Udemy - 리액트 컴포넌트 스타일링

흠 근데 한번 더 들어야할듯 ㅜㅜㅜ

 

일단!!! 스코핑이 무엇이느냐

스타일을 해당 컴포넌트 내부에서만 작동하게 만드는 기법

 

이를 통해, 컴포넌트끼리 스타일이 서로 간섭하지 않게 만드는 것

 

---

 

목표에 있길래,,,

 

if 문 (컴포넌트 내부에서)

if (isLoggedIn) {
  return <p>환영합니다!</p>;
} else {
  return <p>로그인 해주세요.</p>;
}

 

삼항연산자 (주로 JSX안에서)

<p>{isLoggedIn ? "환영합니다!" : "로그인 해주세요."}</p>

 

3) 논리 AND 연산자 (&&) – 조건이 true일 때만 렌더링

{isLoggedIn && <p>환영합니다!</p>}

---

 

흠 강의만 들어서 모르겟늠 좀 읽어봅시다

 

https://velog.io/@kdeun1/React-가이드-4편-Component-Styling

 

https://joseph0926.tistory.com/22#2.%20styled-component-11

[React] React 스타일링 하는 방법 3개 (인라인&일반CSS, styled-components, CSS 모듈)

 

 

 

 

조건부적으로 스타일 적용하기

태그 내부 스타일링 이런식으로 

const emailNotValid = submitted && !enteredEmail.includes('@');

...


return (
    <input
        ...
        style = {{
            backgroundColor: emailNotValid ? '#fed2d2' : '#d1d5db'
        }}
    />
)

 

 

뭔 동적 값으로 추가하라고? 

 

조건부 클래스를 적용하지 않으려면 반드시 undefined 사용하기

className={emailNotValid ? 'invalid' : undefined}

 

 

 

 

110번 강의 약간 뭔소리지?

className={`label ${emailNotValid ? 'invalid' : ''}`}

 

---

 

 

styled-components

JS 파일 안에서 CSS를 직접 작성할 수 있게 해주는 라이브러리

즉, CSS-in-JS 방식의 대표적인 도구

 

 

Header.module.css : 기본 빌드 프로세스에 대한 신호

이거 하면 스코핑 된다는데??

(다른 컴포넌트에서 이름 겹쳤을때 간섭 받지 않게?)

import logo from '../assets/logo.png';
import classes from './Header.module.css';

export default function Header() {
  return (
    <header>
      <img src={logo} alt="A canvas" />
      <h1>ReactArt</h1>
      <p className={classes.paragraph}>A community of artists and art-lovers.</p>
    </header>
  );
}

 

 

 

styled components >> wrapper 생성하여 재상용 할수 있도록

별도로 아웃소싱

const ControlContainer = styled.div`
  display: flex;
  flex-diraction: colum;
  gap:0.5rem;
  margin-bottom:1.5rem;
`


...



<ControlContainer>
~~
</ControlConatiner>
로 적용

 

 

 

스타일 컴보넌트 를 스타일링 하구 싶다면? 

(동적으로 변경시켜보기)

ㄴ 흠.... 이거 일단 what? 인가 싶긴한데 ㅋㅋㅋㅋㅋ

invalid = { }




color:${({invalid}) => invalid ? '#f87171' : '#6b7280'};

 

 

어떤 것이든 타깃 : &

(스타일 컴포넌트에 해당 규칙들이 보관되게 함)

---

 

---

 

 

TailWind Css

클래스를 조합해서 빠르게 UI를 만들 수 있는 CSS 프레임워크

<style>
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}
</style>

<button class="button">버튼</button>

대신
미리 만들어진 유틸리티 클래스들을 조합해서 원하는 디자인 빨랑 구설하기

<button class="bg-blue-500 text-white px-4 py-2 rounded">버튼</button>

 

 

?????? 안되는데 읭