React에서 인라인 스타일 적용하기

1. React의 인라인 스타일
2. 반응 조건부 인라인 스타일

HTML 요소 또는 구성 요소의 스타일 지정은 프런트 엔드 개발자 작업의 핵심입니다. 스타일은 HTML 요소의 적절한 배치와 모양을 보장하는 데 필수적입니다. React 개발자는 다양한 접근 방식을 사용하여 스타일을 적용합니다. 가장 인기 있는 방법 중 하나는 인라인 스타일을 사용하는 것입니다. 오늘 기사에서 우리는 인라인 스타일 사용의 장점과 단점에 대해 논의하고 싶었습니다.

React의 인라인 스타일

React 개발자는 일반적으로 구성 요소의 스타일을 지정하는 데 선호하는 방법이 있습니다. 일부는 모든 구성 요소에 대해 별도의 CSS 파일을 만들고 다른 일부는 모든 스타일을 하나의 파일에 결합합니다. 전체 응용 프로그램에 대한 스타일을 하나의 파일에 작성할 때 클래스에 대한 설명적(고유한) 이름이 부족할 가능성이 훨씬 더 높습니다.

인라인 스타일 정의를 사용하면 JavaScript 및 CSS에 대해 두 개의 별도 파일을 만들지 않고도 구성 요소의 스타일을 지정할 수 있습니다. 이 방법으로 정의된 스타일은 전역 CSS 규칙보다 읽기 쉽고, 이를 사용할 때 명명 문제가 발생할 가능성이 적습니다.

통사론

React의 인라인 스타일은 HTML에서 사용한 적이 있는 경우 예상하는 방식으로 작동합니다. HTML과 마찬가지로 React의 인라인 스타일은 style 속성을 사용하여 설정됩니다. 또한 HTML과 유사하게 인라인 스타일은 React의 클래스도 재정의합니다.

이제 차이점에 대해 이야기해 보겠습니다. JSX에서 구성 요소나 요소의 스타일을 지정하려면 스타일을 나타내는 객체(또는 객체에 대한 참조)를 제공해야 합니다. JSX가 스타일 객체를 해독할 수 있도록 하려면 한 쌍의 중괄호 안에 배치해야 합니다. 간단한 인라인 스타일 선언은 다음과 같습니다.

<h1 style={{display: "none"}}>Hi! Try edit me</h1>;

이 예에서 중괄호의 외부 레이어는 그 안의 객체가 JavaScript 표현식으로 평가되도록 합니다.

구문과 관련하여 React와 HTML의 인라인 스타일의 가장 큰 차이점은 React 인라인 스타일에서 일반 CSS 속성 이름을 사용할 수 없다는 것입니다. 하나의 단어로 이루어진 속성은 대개 동일하지만 여러 단어로 구성된 속성은 대개 하나의 단어로 결합되어 camelCase로 작성됩니다. 예를 들어 font-size 속성은 React 스타일에서 fontSize가 됩니다.

기본적으로 React의 인라인 스타일은 CSS 속성 및 해당 값에 해당하는 키-값 쌍이 있는 객체로 표현됩니다. 쉼표는 키-값 쌍을 구분해야 합니다. 그렇지 않으면 오류가 발생할 수 있습니다.

반응 조건부 인라인 스타일

JSX 코드에는 유효한 스타일로 컴파일할 수 있는 JavaScript 객체가 포함될 수 있습니다. 조건부로 스타일을 적용할 수 있기 때문에 매우 유용한 기능입니다. 중괄호 안에 JavaScript 삼항 연산자를 사용하여 스타일을 적용해야 하는 경우를 설명하는 복잡한 조건을 설정할 수 있습니다.

우리 웹사이트에 어두운 테마와 밝은 테마가 있다고 가정해 보겠습니다. 구성 요소의 state 개체에서 dark 속성을 사용하여 조건부로 두 테마 간에 전환할 수 있습니다. 여기 예가 있습니다.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      dark: false
    }
  }
  render() {
    return <div>
              <h1 style={{backgroundColor: this.state.dark ? "black" : "white", color: this.state.dark ? "white" : "black"}}>
                  Hi! Try edit me</h1>
              <button onClick={() => this.setState({dark: !this.state.dark})}>Switch</button>
           </div>;
  }
}

위의 내용은 인라인 스타일이 얼마나 유용한지 보여주는 간단한 데모입니다.

위의 코드 스니펫에서 스타일 개체가 너무 길어서 따라하기 어려울 수 있음을 눈치채셨을 것입니다. 중괄호 안에 전체 개체를 작성하는 대신 다른 위치에서 정의하고 참조할 수 있습니다. 인라인 스타일 개체에 너무 많은 규칙이 포함되어 있는 것을 발견하면 JSX 외부로 이동합니다. 설명이 포함된 이름으로 변수를 만들어 스타일 개체를 저장하고 변수 이름을 사용하여 참조할 수 있습니다. 이렇게 하면 스타일을 더 쉽게 읽을 수 있습니다. 여기 예가 있습니다.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      dark: false
    }
  }
  render() {
    const darkThemeStyles = {
       backgroundColor: this.state.dark ? "black" : "white",
       color: this.state.dark ? "white" : "black"   
    }
    return <div>
              <h1 style={darkThemeStyles}>Hi! Try edit me</h1>
              <button onClick={() => this.setState({dark: !this.state.dark})}>Switch</button>
           </div>;
  }
}

이렇게 하면 return 문 아래의 JSX 코드가 더 읽기 쉽고 훨씬 깨끗해 보입니다.

일부 React 개발자는 쉽게 읽을 수 있고 범위가 전역적으로 정의되는 대신 단일 구성 요소로 제한되기 때문에 인라인 스타일을 좋아합니다. 구성 요소에서 작업하는 사람들은 구성 요소의 스타일을 쉽게 이해할 수 있습니다.

그러나 CSS가 여전히 유용한 경우가 있습니다. 예를 들어 :hover와 JavaScript에는 없는 다른 많은 선택기가 있습니다.