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

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

---

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

const MyDiv = React.createClass({
  render: function() {
    const style = {
      color: 'white',
      fontSize: 200
    };
    
    return <div style={style}> Have a good and productive day! </div>;
  }
});

이 방식으로 모든 스타일을 지정해야하고 CSS 파일에 스타일이 전혀 지정되어 있지 않아야합니까?

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

두 가지를 모두 수행하는 것은 이상하고 지저분 해 보입니다. 스타일을 조정할 때 두 곳을 확인해야합니다.

답변

---

아직 "모범 사례"가 많지 않습니다. React 컴포넌트에 인라인 스타일을 사용하는 사람들은 여전히 많은 실험을하고 있습니다.

매우 다양한 접근 방식이 있습니다. React 인라인 스타일 lib 비교 차트

All or nothing?

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

• 레이아웃 — 요소 / 구성 요소가 다른 요소와의 관계에서 어떻게 보이는지
• 모양 — 요소 / 구성 요소의 특성
• 동작 및 상태 — 주어진 상태에서 요소 / 구성 요소가 어떻게 보이는지

Start with state-styles

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" } /> 와 같이 props를 사용하여 호출 사이트에서 수행 할 수 있습니다. 다음과 같이 구현됩니다.

<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 구성 요소를 디자인하려고합니다.

Appearance

이것은 "인라인 스타일"토론에서 가장 논란이 많은 영역입니다. 궁극적으로 설계하는 구성 요소와 JavaScript를 사용하는 팀의 편안함에 달려 있습니다.

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

하드 부품의 구문이 SASS의 구문을 모델링하도록 설계 되었기 때문에 Radium을 좋아합니다.

코드 구성

종종 모듈 외부에 스타일 개체가 표시됩니다. 할일 목록 구성 요소의 경우 다음과 같을 수 있습니다.

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

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

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

getter functions

템플릿에 스타일 로직을 추가하면 위와 같이 약간 지저분해질 수 있습니다. 스타일을 계산하기 위해 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>
  }
});

Further watching

올해 초 React Europe에서 인라인 스타일과 'CSS를 사용하는 것이 가장 좋은 때' 에 대해 자세히 논의했습니다.

그 과정에서 새로운 발견을하시는 동안 기꺼이 도와 드리겠습니다. :) Hit me up-> @chantastic

출처 : https://stackoverflow.com/questions/26882177/react-js-inline-style-best-practices