egoing - styled component - stackblitz ver

Styled component

---

https://lshjju.tistory.com/146

React.js Styled component - 리액트 스타일드 컴포넌트

---

---

Final build

---

https://stackblitz.com/edit/vitejs-vite-mam8zrpf?file=src%2FApp.jsx

egoing - styled component - StackBlitz

---

---

New project building

---

https://lshjju.tistory.com/104

StackBlitz web editor - 스택블리츠 웹 에디터

---

---

스타일드 컴포넌트로 버튼을 디자인 합니다.

---

---

스타일드 컴포넌트 인스톨

https://lshjju.tistory.com/146

React.js Styled component - 리액트 스타일드 컴포넌트

---

/* null */

 

App.css

기본 스타일을 삭제 합니다.

---

App.jsx 에 코딩 합니다.

import styled from "styled-components";

 

App.jsx

스컴을 임포트 합니다.

---

const SimpleButton = styled.button`
  color: white;
  background-color: green;
`;

 

펑션 App 위에 심플버튼 배리어블에 빽틱으로 스타일을 적용합니다.

버튼은 태그네임입니다.

html 버튼 태그에 스타일을 적용한다고 생각하면 편할것 같습니다.

// styled-components를 사용하여 'SimpleButton'이라는 이름의 스타일링된 버튼 컴포넌트를 정의합니다.
// 이는 HTML의 <button> 태그에 특정 스타일을 적용한 것입니다.
const SimpleButton = styled.button`
  color: white; // 버튼 텍스트의 색상을 흰색으로 설정합니다.
  background-color: green; // 버튼의 배경색을 초록색으로 설정합니다.
`;

---

export default function App() {
  return (
    <div>
      <SimpleButton>Simple</SimpleButton>
    </div>
  );
}

 

스타일을 펑션앱에 적용합니다.

// 'App'은 이 애플리케이션의 메인 함수형 컴포넌트입니다.
// 이 컴포넌트가 반환하는 내용이 웹 페이지에 렌더링됩니다.
export default function App() {
  return ( // 컴포넌트가 렌더링할 JSX(JavaScript XML)를 반환합니다.
    <div> {/* 콘텐츠를 감싸는 일반적인 HTML div 요소입니다. */}
      {/* 위에서 정의한 'SimpleButton' 컴포넌트를 렌더링하고, 버튼 내부에 'Simple' 텍스트를 표시합니다. */}
      <SimpleButton>Simple</SimpleButton>
    </div>
  );
}

---

test

f12 - elements

버튼 클래스와 헤더 스타일 코드를 체크합니다.

---

Completion

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import styled from "styled-components";

const SimpleButton = styled.button`
  color: white;
  background-color: green;
`;

export default function App() {
  return (
    <div>
      <SimpleButton>Simple</SimpleButton>
    </div>
  );
}

 

---

---

스컴 스타일을 상속 받는 컴포넌트를 만듭니다.

---

const LargeButton = styled(SimpleButton)`
  font-size: 50px;
`;

 

스타일 적용할 요소가 태그네임이 아닌 경우 ( ) 로 묶어줍니다.

심플버튼 아래에 심플버튼을 상속 받는 스타일드 펑션을 사용하는 라지버튼을 초기화 합니다.

---

      <LargeButton>Large</LargeButton>

 

심플버튼 아래에 라지버튼 태그를 작성합니다.

 

f12 - elements 체크

클래스를 추적 합니다.

라지버튼은 심플버튼 클래스를 상속받고 있음을 체크합니다.

---

---

스컴 아닌 스타일을 상속 받는 컴포넌트를 만듭니다.

---

const ReactButton = (props) => {
  return <button>{props.children}</button>;
};

 

스컴이 아닌 스타일을 추가 합니다.

이 스타일은 기본 버튼 스타일입니다.

즉 버튼 태그 스타일 입니다.

---

      <ReactButton>React</ReactButton>

 

버튼 추가하고 뷰로 에러가 없는지 체크 합니다.

---

const ReactLargeButton = styled(ReactButton)`
  font-size: 50px;
`;

 

리액트라지버튼을 스컴으로 스타일 합니다.

 

---

      <ReactLargeButton>React Large</ReactLargeButton>

 

리액트라지버튼 태그를 추가합니다.

 

뷰를 체크 합니다.

펑션으로 리액트버튼을 상속 받았지만 실패했습니다.

 

f12

버튼 태그에 클래스가 없습니다.

개선 합니다.

---

const ReactButton = (props) => {
  return <button className={props.className}>{props.children}</button>;
};

 

스타일드 컴포넌트가 아닌 스타일을 상속 받기 위해서는 클래스네임이 필요합니다.

클래스네임을 추가합니다.

---

// styled-components를 사용하여 SimpleButton 컴포넌트를 정의합니다.
// HTML의 button 태그를 기반으로 하며, 글자색은 흰색, 배경색은 초록색으로 설정됩니다.
const SimpleButton = styled.button`
  color: white;
  background-color: green;
`;

// SimpleButton을 상속받아 LargeButton 컴포넌트를 정의합니다.
// SimpleButton의 스타일을 유지하면서 글자 크기를 50px로 변경합니다.
const LargeButton = styled(SimpleButton)`
  font-size: 50px;
`;

// React 함수형 컴포넌트인 ReactButton을 정의합니다.
// props로 className과 children을 받아 button 태그에 적용합니다.
// 이렇게 정의된 컴포넌트는 나중에 styled-components로 스타일을 확장할 수 있습니다.
const ReactButton = (props) => {
  return <button className={props.className}>{props.children}</button>;
};

// ReactButton 컴포넌트를 기반으로 ReactLargeButton을 정의합니다.
// ReactButton에 50px의 글자 크기 스타일을 추가합니다.
const ReactLargeButton = styled(ReactButton)`
  font-size: 50px;
`;

---

test

스타일이 잘 적용되는지 체크합니다.

---

Completion

import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';
import styled from 'styled-components';

const SimpleButton = styled.button`
  color: white;
  background-color: green;
`;

const LargeButton = styled(SimpleButton)`
  font-size: 50px;
`;

const ReactButton = (props) => {
  return <button className={props.className}>{props.children}</button>;
};

const ReactLargeButton = styled(ReactButton)`
  font-size: 50px;
`;

export default function App() {
  return (
    <div>
      <SimpleButton>Simple</SimpleButton>
      <LargeButton>Large</LargeButton>
      <ReactButton>React</ReactButton>
      <ReactLargeButton>React Large</ReactLargeButton>
    </div>
  );
}

---

---

조건문으로 스타일 콘트롤 합니다.

---

const PrimaryButton = styled.button`
  color: ${function (props) {
    if (props.primary) {
      return "white";
    } else {
      return "black";
    }
  }};
`;

 

프롭스를 파라미터로 사용하는 펑션을 적용한 프라이머리 버튼을 스타일합니다.

엘스문을 사용하여 프라이머리가 있다면 화이트 없다면 블랙을 리턴 합니다.

즉, 텍스트 컬라를 조건문으로 정의 합니다.

---

const PrimaryButton = styled.button`
  color: ${(props) => (props.primary ? "white" : "black")};
  background-color: ${(props) => (props.primary ? "blue" : "gray")};
`;

 

폰트칼라 엘스문을 터너리 오퍼레이터로 변경합니다.

심심하니까 백그라운드칼라 터너리 오퍼레이터도 추가해 봅니다.

프라이머리 프롭스가 있으면 파란배경 흰글자, 없으면 회색배경에 검은글자가 적용됩니다.

// PrimaryButton 컴포넌트를 정의합니다.
// 이 버튼은 `primary` prop의 값에 따라 색상이 동적으로 변경됩니다.
// `primary` prop이 true이면 글자색은 흰색, 배경색은 파란색이 되고,
// 그렇지 않으면 글자색은 검은색, 배경색은 회색이 됩니다.
const PrimaryButton = styled.button`
  color: ${(props) => (props.primary ? 'white' : 'black')};
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
`;

---

      <PrimaryButton>Normal</PrimaryButton>
      <PrimaryButton primary>Primary</PrimaryButton>

 

프라이머리버튼 태그를 추가합니다.

그것에 프라이머리 프롭을 추가한 태그를 추가합니다.

즉 프라이머리 프롭이 없는 태그와 있는 태그를 하나씩 만듭니다.

그리고 뷰를 체크 합니다.

      {/* PrimaryButton을 렌더링합니다. 
      `primary` prop이 없으므로 기본(회색 배경, 검은 글자) 스타일이 적용됩니다. */}
      <PrimaryButton>Normal</PrimaryButton>
      {/* PrimaryButton을 렌더링합니다. 
      `primary` prop을 true로 설정하여 강조(파란 배경, 흰 글자) 스타일이 적용됩니다. */}
      <PrimaryButton primary>Primary</PrimaryButton>

---

test

프라이머리가 있는 것과 없는 것의 스타일이 다른것을 체크합니다.

---

Completion

import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';
import styled from 'styled-components';

const SimpleButton = styled.button`
  color: white;
  background-color: green;
`;

const LargeButton = styled(SimpleButton)`
  font-size: 50px;
`;

const ReactButton = (props) => {
  return <button className={props.className}>{props.children}</button>;
};

const ReactLargeButton = styled(ReactButton)`
  font-size: 50px;
`;

const PrimaryButton = styled.button`
  color: ${(props) => (props.primary ? 'white' : 'black')};
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
`;

export default function App() {
  return (
    <div>
      <SimpleButton>Simple</SimpleButton>
      <LargeButton>Large</LargeButton>
      <ReactButton>React</ReactButton>
      <ReactLargeButton>React Large</ReactLargeButton>
      <PrimaryButton>Normal</PrimaryButton>
      <PrimaryButton primary>Primary</PrimaryButton>
    </div>
  );
}

---

Comment ver

// 필요한 React 기능 및 외부 라이브러리/파일들을 불러옵니다.
import { useState } from 'react'; // React에서 상태(State)를 관리하는 훅입니다. 이 코드에서는 직접 사용되지는 않습니다.
import reactLogo from './assets/react.svg'; // 'assets' 폴더에 있는 React 로고 SVG 이미지를 가져옵니다.
import viteLogo from '/vite.svg'; // 프로젝트 루트에 있는 Vite 로고 SVG 이미지를 가져옵니다.
import './App.css'; // 이 컴포넌트의 전역 스타일을 담당하는 CSS 파일을 불러옵니다.
import styled from 'styled-components'; // CSS-in-JS 라이브러리인 'styled-components'를 가져옵니다.

// styled-components를 사용하여 기본적인 스타일을 가진 <button> 컴포넌트를 정의합니다.
// 'SimpleButton'은 흰색 텍스트와 초록색 배경을 가집니다.
const SimpleButton = styled.button`
  color: white; // 버튼 내부 텍스트 색상을 흰색으로 설정합니다.
  background-color: green; // 버튼의 배경색을 초록색으로 설정합니다.
`;

// 'SimpleButton'의 스타일을 상속받아 확장하는 'LargeButton'을 정의합니다.
// SimpleButton의 모든 스타일에 추가로 폰트 크기를 50px로 설정합니다.
const LargeButton = styled(SimpleButton)`
  font-size: 50px; // 폰트 크기를 50px로 확대합니다.
`;

// 일반적인 React 함수형 컴포넌트 'ReactButton'을 정의합니다.
// 이 컴포넌트는 전달받은 'className'과 'children' 속성을 이용하여 <button> 요소를 렌더링합니다.
// styled-components를 사용하지 않고 HTML 기본 태그를 직접 반환합니다.
const ReactButton = (props) => {
  return <button className={props.className}>{props.children}</button>; // props로 받은 className과 children을 적용한 button 요소를 반환합니다.
};

// 위에서 정의한 'ReactButton' 컴포넌트에 styled-components를 적용하여 스타일을 확장합니다.
// 이렇게 하면 일반 React 컴포넌트에도 styled-components의 스타일링 기능을 사용할 수 있습니다.
const ReactLargeButton = styled(ReactButton)`
  font-size: 50px; // ReactButton에 폰트 크기 스타일을 추가합니다.
`;

// 'props'를 활용하여 조건부 스타일링을 적용하는 'PrimaryButton'을 정의합니다.
// 이 버튼은 'primary'라는 props를 전달받았는지 여부에 따라 색상이 달라집니다.
const PrimaryButton = styled.button`
  // 'primary' props가 true이면 흰색, 아니면 검은색 텍스트를 사용합니다.
  color: ${(props) => (props.primary ? 'white' : 'black')};
  // 'primary' props가 true이면 파란색, 아니면 회색 배경을 사용합니다.
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
`;

// 애플리케이션의 메인 컴포넌트인 'App'입니다.
// 이 컴포넌트가 브라우저 화면에 표시될 내용을 정의합니다.
export default function App() {
  return (
    // 여러 버튼 컴포넌트들을 포함하는 컨테이너 div를 반환합니다.
    <div>
      {/* 기본 스타일의 SimpleButton을 렌더링합니다. */}
      <SimpleButton>Simple</SimpleButton>
      {/* SimpleButton 스타일을 상속받고 폰트 크기가 큰 LargeButton을 렌더링합니다. */}
      <LargeButton>Large</LargeButton>
      {/* styled-components를 사용하지 않은 순수 React 컴포넌트인 ReactButton을 렌더링합니다. */}
      <ReactButton>React</ReactButton>
      {/* 순수 React 컴포넌트인 ReactButton에 styled-components로 스타일을 적용한 ReactLargeButton을 렌더링합니다. */}
      <ReactLargeButton>React Large</ReactLargeButton>
      {/* 'primary' props가 없으므로 기본(검정 텍스트, 회색 배경) 스타일의 PrimaryButton을 렌더링합니다. */}
      <PrimaryButton>Normal</PrimaryButton>
      {/* 'primary' props를 전달하여 조건부 스타일(흰색 텍스트, 파란색 배경)이 적용된 PrimaryButton을 렌더링합니다. */}
      <PrimaryButton primary>Primary</PrimaryButton>
    </div>
  );
}

---

---

---

출처

 

https://wikibook.co.kr/react-rev-ebook/

생활코딩! React 리액트 프로그래밍 (개정판) (ebook): 처음 프로그래밍을 시작하는 입문자의 눈높이

---