React.js 인라인 스타일 모범 사례

React.js 인라인 스타일 모범 사례

---

다음과 같이 React 클래스 내에서 스타일을 지정할 수 있습니다.

var MyDiv = React.createClass({
  render: function() {
    var style = {
      color: 'white',
      fontSize: 200
    };

    return <div style={style}> Have a good and productive day! </div>;
  }
});

이 방법으로 모든 스타일을 지정하고 CSS 파일에 스타일을 지정하지 않아야합니까?

아니면 인라인 스타일을 완전히 피해야합니까?

스타일을 조정할 때 두 곳을 확인해야합니다.

---

아직 "모범 사례"는 많지 않습니다. React 구성 요소에 인라인 스타일을 사용하는 사람들은 여전히 ​​실험 중입니다.

인라인 스타일 lib 비교 차트에 반응 하는 방식은 매우 다양합니다.

전부 아니면 아무것도?

"스타일"이라고하는 것은 실제로 몇 가지 개념을 포함합니다.

• 레이아웃 — 요소 / 구성 요소가 다른 요소와 관계가있는 방식
• 모양 — 요소 / 구성 요소의 특성
• 동작 및 상태 — 특정 상태에서 요소 / 구성 요소가 보이는 방식

상태 스타일로 시작

React는 이미 구성 요소의 상태를 관리하고 있으므로 상태 및 동작 스타일이 구성 요소 논리와의 위치 지정에 적합합니다.

조건부 상태 클래스로 렌더링 할 구성 요소를 구축하는 대신 상태 스타일을 직접 추가하는 것이 좋습니다.

// Typical component with state-classes
<li 
 className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />


// Using inline-styles for state
<li className='todo-list__item'
 style={(item.complete) ? styles.complete : {}} />

우리는 스타일을 표현 하기 위해 클래스를 사용하고 있지만 더 이상 state와 behavior에.is- 접두사 클래스를 사용하지 않습니다 .

우리는 사용할 수 있습니다 Object.assign(ES6) 또는 _.extend(밑줄 / lodash가) 여러 국가에 대한 지원을 추가 할 :

// Supporting multiple-states with inline-styles
<li 'todo-list__item'
 style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>

커스터마이징 및 재사용

이제 우리는 Object.assign그것을 사용하여 구성 요소를 다른 스타일로 재사용 할 수있게하는 것이 매우 간단 해졌습니다. 기본 스타일을 재정의하려면 콜 사이트에서 소품을 사용하여 다음과 같이 할 수 <TodoItem dueStyle={ fontWeight: "bold" } />있습니다. 다음과 같이 구현되었습니다.

<li 'todo-list__item'
 style={Object.assign({},
         item.due && styles.due,
         item.due && this.props.dueStyles)}>

나열한 것

개인적으로 인라인 레이아웃 스타일에 대한 설득력있는 이유는 없습니다. 많은 훌륭한 CSS 레이아웃 시스템이 있습니다. 하나만 사용하겠습니다.

즉, 레이아웃 스타일을 구성 요소에 직접 추가하지 마십시오. 컴포넌트를 레이아웃 컴포넌트로 감싸십시오. 다음은 예입니다.

// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
 className="col-xs-12 col-sm-6 col-md-8"
 firstName="Michael"
 lastName="Chan" />

// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
  <UserBadge
   firstName="Michael"
   lastName="Chan" />
</div>

레이아웃 지원을 위해 종종 구성 요소를 디자인 100% width하고 height.

외관

이것은 "인라인 스타일"토론에서 가장 논쟁이 많은 부분입니다. 궁극적으로 JavaScript를 사용하여 디자인하는 구성 요소와 팀의 편의에 달려 있습니다.

한 가지 확실한 것은 도서관의 도움이 필요하다는 것입니다. 원시 React에서 브라우저 상태 ( :hover, :focus) 및 미디어 쿼리는 고통 스럽습니다.

이 어려운 부분의 구문은 SASS의 구문을 모델링하도록 설계 되었기 때문에 Radium을 좋아 합니다.

코드 구성

종종 모듈 외부에 스타일 객체가 나타납니다. 할 일 목록 구성 요소의 경우 다음과 같이 보일 수 있습니다.

var styles = {
  root: {
    display: "block"
  },
  item: {
    color: "black"

    complete: {
      textDecoration: "line-through"
    },

    due: {
      color: "red"
    }
  },
}

게터 함수

템플릿에 스타일 로직을 추가하면 위와 같이 약간 지저분해질 수 있습니다. 스타일을 계산하기 위해 getter 함수를 만들고 싶습니다.

React.createClass({
  getStyles: function () {
    return Object.assign(
      {},
      item.props.complete && styles.complete,
      item.props.due && styles.due,
      item.props.due && this.props.dueStyles
    );
  },

  render: function () {
    return <li style={this.getStyles()}>{this.props.item}</li>
  }
});

더보고

올해 초 React Europe : Inline Styles 및 'CSS 만 사용하는 것이 가장 좋은시기' 에서이 모든 것들에 대해 자세히 설명했습니다 .

당신이 길을 따라 새로운 발견을 같이 내가 도와 드리겠습니다 :) 나를 때려 -> @chantastic

---

React의 스타일 속성은 값이 객체, 즉 키 값 쌍일 것으로 예상합니다.

style = {}그 안에 또 다른 물체가 있어야 {float:'right'}작동합니다.

<span style={{float:'right'}}>{'Download Audit'}</span>

이것이 문제를 해결하기를 바랍니다.

---

React 구성 요소 내에서 인라인 스타일을 광범위하게 사용합니다. 구성 요소 내에서 스타일을 배치하는 것이 훨씬 더 명확하다는 것을 알았습니다. 구성 요소의 스타일과 스타일이 항상 명확하기 때문입니다. 또한 Javascript의 모든 기능을 사용할 수 있으면보다 복잡한 스타일링 요구 사항이 단순화됩니다.

처음에는 확신하지 못했지만 몇 달 동안 손을 대면 완전히 변환되어 모든 CSS를 인라인 또는 기타 JS 중심 CSS 메소드로 변환하는 중입니다.

Facebook 직원과 React 기고자 "vjeux"의 프레젠테이션은 매우 유용합니다. https://speakerdeck.com/vjeux/react-css-in-js

---

스타일 속성의 주요 목적은 동적 상태 기반 스타일을위한 것입니다. 예를 들어, 일부 상태에 따라 진행률 표시 줄에 폭 스타일이 있거나 다른 것에 기반한 위치 또는 가시성이있을 수 있습니다.

JS의 스타일은 애플리케이션이 재사용 가능한 컴포넌트에 사용자 정의 스타일을 제공 할 수 없다는 제한을 부과합니다. 위에서 언급 한 상황에서는 완벽하게 허용되지만 가시적 특성, 특히 색상을 변경하는 경우에는 적합하지 않습니다.

---

James K Nelson은 "자바 스크립트로 구성 요소를 스타일링하지 말아야하는 이유" 라는 편지에서 실제로 인라인 스타일을 단점으로 사용할 필요가 없다고 말합니다. 그의 말은 더 적은 / scss를 가진 오래된 지루한 CSS가 가장 좋은 해결책이라는 것입니다. 그의 논문의 일부는 CSS에 유리합니다.

• 외부로 확장 가능
• 레버 가능 (인라인 스타일로 모든 것을 겹쳐서 사용)
• 디자이너 친화적

---

내가하는 일은 재사용 가능한 구성 요소 각각에 고유 한 사용자 정의 요소 이름을 부여한 다음 해당 구성 요소에 대한 CSS 파일을 작성하는 것입니다. 특히 해당 구성 요소의 모든 스타일 옵션 (및 해당 구성 요소에 대해서만)이 있습니다.

var MyDiv = React.createClass({
  render: function() {
    return <custom-component style={style}> Have a good and productive day! </custom-component>;
  }
});

'custom-component.css'파일에서 모든 항목은 custom-component 태그로 시작합니다.

custom-component { 
   display: block; /* have it work as a div */
   color: 'white'; 
   fontSize: 200; 
} 
custom-component h1 { 
  font-size: 1.4em; 
}

즉, 분리 문제에 대한 비판적 개념을 잃지 않습니다. 보기 대 스타일. 구성 요소를 공유하면 다른 사용자가 구성 요소를 나머지 웹 페이지와 일치시키기가 더 쉽습니다.

---

JSX의 스타일링은 HTML의 스타일링과 매우 유사합니다.

HTML 사례 :

div style = "배경색 : 빨간색; 색 : 흰색"

JSX 사례 :

div style = {{backgroundColor : 'red', 색상 : 'white'}}

---

그것은 정말 방법에 따라 큰 당신이 좋아하는 bundlers를 사용 싶으면 응용 프로그램입니다 웹팩 빌드에서 함께하고 번들 CSS와 JS 당신이 응용 프로그램의 흐름을 옴 싶어하는 방법! 하루가 끝나면 상황에 따라 결정을 내릴 수 있습니다!

큰 프로젝트에서 파일을 구성하는 것을 선호하는 것은 CSS와 JS 파일을 분리 하는 것입니다. 공유하기가 쉽고 UI 사람들이 CSS 파일을 쉽게 통과 할 수 있으며 전체 응용 프로그램을 위해 훨씬 깔끔한 파일을 구성 할 수 있습니다!

항상 이런 식으로 생각하고 개발 단계에서 모든 것이 있어야 할 곳에 있어야하며 이름이 적절하며 다른 개발자가 쉽게 찾을 수 있습니다.

나는 개인적으로 그것들을 내 필요에 따라 섞는다. 예를 들어 ... 외부 CSS를 사용해보십시오. 그러나 필요한 경우 React가 스타일을 받아 들일 것입니다.

import React from 'react';

const App = props => {
  return (
    <div className="app" style={{background: 'red', color: 'white'}}>  /*<<<<look at style here*/
      Hello World...
    </div>
  )
}

export default App;

---

일반적으로 각 React 구성 요소와 관련된 scss 파일이 있습니다. 그러나 구성 요소를 논리로 캡슐화하지 않는 이유를 알 수 없습니다. 내 말은, 당신은 웹 컴포넌트와 비슷한 것을 가지고 있습니다.

---

구성에 따라 인라인 스타일은 핫 리로드를 제공 할 수 있습니다. 스타일이 변경 될 때마다 웹 페이지가 즉시 다시 렌더링됩니다. 이를 통해 컴포넌트를 더 빨리 개발할 수 있습니다. CSS + SCSS에 대한 핫 리로드 환경을 설정할 수 있다고 확신합니다.

---

일부 구성 요소의 경우 인라인 스타일을 사용하는 것이 더 쉽습니다. 또한 구성 요소 스타일에 애니메이션을 적용하는 것이 더 쉽고 간결합니다 (CSS가 아닌 Javascript를 사용함에 따라).

독립형 구성 요소의 경우 'Spread Operator'또는 '...'을 사용합니다. 나를 위해, 그것은 명확하고 아름답고 좁은 공간에서 작동합니다. 다음은 이점을 보여주기 위해 만든 작은 로딩 애니메이션입니다.

<div style={{...this.styles.container, ...this.state.opacity}}>
    <div style={{...this.state.colors[0], ...this.styles.block}}/>
    <div style={{...this.state.colors[1], ...this.styles.block}}/>
    <div style={{...this.state.colors[2], ...this.styles.block}}/>
    <div style={{...this.state.colors[7], ...this.styles.block}}/>
    <div style={{...this.styles.block}}/>
    <div style={{...this.state.colors[3], ...this.styles.block}}/>
    <div style={{...this.state.colors[6], ...this.styles.block}}/>
    <div style={{...this.state.colors[5], ...this.styles.block}}/>
    <div style={{...this.state.colors[4], ...this.styles.block}}/>
  </div>

    this.styles = {
  container: {
    'display': 'flex',
    'flexDirection': 'row',
    'justifyContent': 'center',
    'alignItems': 'center',
    'flexWrap': 'wrap',
    'width': 21,
    'height': 21,
    'borderRadius': '50%'
  },
  block: {
    'width': 7,
    'height': 7,
    'borderRadius': '50%',
  }
}
this.state = {
  colors: [
    { backgroundColor: 'red'},
    { backgroundColor: 'blue'},
    { backgroundColor: 'yellow'},
    { backgroundColor: 'green'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
  ],
  opacity: {
    'opacity': 0
  }
}

그런 다음 componentWillMount ()에서 간격을 설정했습니다 ...

this.interval = setInterval(() => {
  let colors = this.state.colors;
  let opacity = this.state.opacity;

  if(this.props.reverse) {
    let color = colors[colors.length-1];
    colors.pop();
    colors.unshift(color)
  } else {
    let color = colors[0];
    colors.shift();
    colors.push(color);
  }

  opacity['opacity'] < 1 ? opacity['opacity']+=0.06 : null;

  this.setState({colors, opacity});
}, this.speed);

---

다음은 JSX 구문 의 부울 기반 스타일입니다 .

style={{display: this.state.isShowing ? "inherit" : "none"}}

---

인라인 스타일을 사용할 수는 있지만 모든 스타일에서 사용하는 경우 몇 가지 제한이 있습니다. CSS 의사 선택기 와 미디어 쿼리 를 사용할 수 없다는 알려진 제한이 있습니다 .

Radium 을 사용 하여이 문제를 해결할 수는 있지만 여전히 프로젝트가 번거로울 것이라고 생각합니다.

CSS 모듈을 사용하는 것이 좋습니다 .

CSS 모듈 을 사용 하면 CSS 파일로 CSS를 자유롭게 작성할 수 있으며 이름 충돌에 대해 걱정할 필요가 없습니다. CSS 모듈이이를 처리합니다.

이 방법의 장점은 특정 구성 요소에 스타일 기능을 제공한다는 것입니다. 이는 다음 개발자가 프로젝트에서 작업 할 수 있도록 훨씬 더 유지 보수가 쉬운 코드와 읽기 쉬운 프로젝트 아키텍처를 만듭니다.

---

인라인 스타일의 문제점은 컨텐츠 보안 정책 (CSP)이 점점 일반화되어이를 허용하지 않는다는 것입니다. 따라서 인라인 스타일을 완전히 피하는 것이 좋습니다.

업데이트 : 추가 설명을 위해 CSP는 서버에서 보내는 HTTP 헤더로 페이지에 표시 할 수있는 내용을 제한합니다. 이는 개발자가 사이트를 잘못 코딩 할 경우 공격자가 나쁜 일을하지 못하도록 서버에 적용 할 수있는 추가 완화 방법 일뿐입니다.

이러한 제한의 대부분은 XSS (교차 사이트 스크립팅) 공격을 중지하는 것입니다. XSS는 공격자가 페이지에 자신의 자바 스크립트를 포함시키는 방법을 알아내는 곳입니다 (예를 들어, 사용자 이름 bob<SCRIPT>alert("hello")</SCRIPT>을 입력 한 다음 주석을 게시하고 페이지를 방문하면 경고가 표시되지 않음). 개발자는 사용자가 이와 같은 콘텐츠를 사이트에 추가 할 수있는 기능을 거부해야하지만 실수를 한 경우 CSP는 script>태그 가 발견되면 페이지가로드되지 않도록 차단합니다 .

CSP는 개발자가 실수했을 경우 공격자가 해당 사이트 방문자에게 문제를 일으킬 수 없도록 보장하기위한 추가 수준의 보호입니다.

모든 것이 XSS이므로 공격자가 <script>태그를 포함 할 수 없지만 태그를 포함 <style>하거나 태그에 style=매개 변수를 포함 할 수 있다면 어떨까요? 그런 다음 잘못된 버튼이나 다른 문제를 클릭하도록 속이는 방식으로 사이트의 모양을 변경할 수 있습니다. 이것은 훨씬 덜 걱정이지만 여전히 피해야 할 부분이며 CSP는이를 위해이를 수행합니다.

CSP 사이트 테스트를위한 좋은 자료는 https://securityheaders.io/

CSP에 대한 자세한 내용은 http://www.html5rocks.com/en/tutorials/security/content-security-policy/를 참조하십시오.

---

StrCSS도 사용할 수 있으며, 격리 된 클래스 이름 등을 생성합니다! 예제 코드는 다음과 같습니다. 구문 강조 지원을 위해 Visual Studio Marketplace에서 VSCode 확장을 설치 (선택 사항) 할 수 있습니다!

출처 : strcss

import { Sheet } from "strcss";
import React, { Component } from "react";

const sheet = new Sheet(`
  map button
    color green
    color red !ios
    fontSize 16
  on hover
    opacity .5
  at mobile
    fontSize 10
`);

export class User extends Component {
  render() {
    return <div className={sheet.map.button}>
      {"Look mom, I'm green!
      Unless you're on iOS..."}
    </div>;
  }
}

---

CSS 파일로 스타일을 작성하는 것과 비교하여 React의 스타일 속성은 다음과 같은 장점이 있습니다 .

1. 자바 스크립트 도구를 프로그래밍 언어로 사용하여 요소의 스타일을 제어 할 수 있습니다. 여기에는 변수 포함, 조건 사용 및 자식 구성 요소에 스타일 전달이 포함됩니다.
2. "구성 요소"접근 방식. 더 이상 구성 요소를 위해 작성된 HTML, JS 및 CSS 코드를 분리하지 않아도됩니다. 구성 요소의 코드가 통합되어 한 곳에 작성됩니다.

그러나 React의 스타일 속성에는 몇 가지 단점 이 있습니다.

1. 미디어 쿼리를 사용할 수 없습니다
2. 의사 선택기를 사용할 수 없습니다.
3. CSS 클래스에 비해 효율성이 떨어집니다.

JS에서 CSS를 사용하면 이러한 단점없이 스타일 태그의 모든 장점을 얻을 수 있습니다 . 오늘 현재 js 라이브러리에는 Emotion, Styled-Components 및 Radium을 비롯하여 잘 지원되는 몇 가지 CSS가 있습니다. 이러한 라이브러리는 React가 HTML에 대한 CSS 종류입니다. JS 코드에서 CSS를 작성하고 CSS를 제어 할 수 있습니다.

코드가 간단한 요소를 스타일링하는 방법을 비교해 봅시다. "hello world"div의 스타일을 지정하여 데스크톱에서는 크고 모바일에서는 작게 표시합니다.

스타일 속성 사용

return (
   <div style={{fontSize:24}} className="hello-world">
      Hello world
   </div>
)

스타일 태그에서는 미디어 쿼리를 사용할 수 없으므로 className을 요소에 추가하고 CSS 규칙을 추가해야합니다.

@media screen and (max-width: 700px){
   .hello-world {
      font-size: 16px; 
   }
}

Emotion의 10 CSS 태그 사용

return (
   <div
      css={{
         fontSize: 24, 
         [CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY]:{
            fontSize: 16 
         }
      }
   >
      Hello world
   </div>
)

Emotion은 스타일이 지정된 구성 요소뿐만 아니라 템플릿 문자열도 지원합니다. 따라서 원하는 경우 다음을 작성할 수 있습니다.

return (
   <Box>
      Hello world
   </Box>
)

const Box = styled.div`
   font-size: 24px; 
   ${CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY}{
      font-size: 16px; 
   }
`

후드 뒤에는 "Css in JS"가 CSS 클래스를 사용합니다. 감정은 특히 성능을 염두에두고 작성되었으며 캐싱을 사용합니다. React 스타일 속성과 비교할 때 JS의 CSS는 더 나은 성능을 제공합니다.

모범 사례

권장하는 몇 가지 모범 사례는 다음과 같습니다.

1. 인라인 또는 JS에서 요소의 스타일을 지정하려면 css-in-js 라이브러리를 사용하고 스타일 속성을 사용하지 마십시오.

이 방법으로 모든 스타일을 지정하고 CSS 파일에 스타일을 지정하지 않아야합니까?

2. css-in-js 솔루션을 사용하는 경우 Css 파일에 스타일을 작성할 필요가 없습니다. JS가 제공하는 프로그래밍 언어의 모든 도구를 사용할 수 있으므로 JS에서 CSS를 작성하는 것이 좋습니다.

인라인 스타일을 완전히 피해야합니까?

3. JS에서 스타일 코드를 구성하는 것은 일반적으로 코드를 구성하는 것과 매우 유사합니다. 예를 들면 다음과 같습니다.
   • 반복되는 스타일을 인식하고 한 곳에 작성하십시오. Emotion에서이를 수행하는 두 가지 방법이 있습니다.

// option 1 - Write common styles in CONSTANT variables
// styles.js
export const COMMON_STYLES = {
   BUTTON: css`
      background-color: blue; 
      color: white; 
      :hover {
         background-color: dark-blue; 
      }
   `
}

// SomeButton.js
const SomeButton = (props) => {
   ...
   return (
      <button
         css={COMMON_STYLES.BUTTON}
         ...
      >
         Click Me
      </button>
   )
}

// Option 2 - Write your common styles in a dedicated component 

const Button = styled.button`
   background-color: blue; 
   color: white; 
   :hover {
      background-color: dark-blue; 
   }   
`

const SomeButton = (props) => {
   ...
   return (
      <Button ...> 
         Click me
      </Button>
   )
}

• 반응 코딩 패턴은 캡슐화 된 컴포넌트입니다. 컴포넌트를 제어하는 ​​HTML 및 JS는 하나의 파일로 작성됩니다. 그것이 해당 구성 요소의 스타일을 지정하는 CSS / 스타일 코드입니다.

• 필요한 경우 구성 요소에 스타일링 소품을 추가하십시오. 이 방법으로 하위 구성 요소로 작성된 코드와 스타일을 재사용하고 상위 구성 요소의 특정 요구에 맞게 사용자 정의 할 수 있습니다.

const Button = styled.button([COMMON_STYLES.BUTTON, props=>props.stl])

const SmallButton = (props)=>(
   <Button 
      ...
      stl={css`font-size: 12px`}
   >
      Click me if you can see me
   </Button>
)

const BigButton = (props) => (
   <Button
      ...
      stl={css`font-size: 30px;`}
   >
      Click me
   </Button>
)

---

언젠가 컴포넌트에서 어떤 엘리먼트를 스타일링해야하지만, 컴포넌트를 하나만 표시하거나 스타일이 너무 적 으면 CSS 클래스를 사용하는 대신 인라인 스타일로 반응합니다. reactjs 인라인 스타일은 HTML 인라인 스타일과 동일하지만 속성 이름이 약간 다릅니다.

style = {{prop : "value"}}을 사용하여 태그에 스타일을 작성하십시오.

import React, { Component } from "react";
    import { Redirect } from "react-router";

    class InlineStyle extends Component {
      constructor(props) {
        super(props);
        this.state = {};
      }

      render() {
        return (
          <div>
            <div>
              <div
                style={{
                  color: "red",
                  fontSize: 40,
                  background: "green"
                }}// this is inline style in reactjs
              >

              </div>
            </div>
          </div>
        );
      }
    }
    export default InlineStyle;

참고 URL : https://stackoverflow.com/questions/26882177/react-js-inline-style-best-practices