리액트의 UI 디자인을 위한 여러 방법들이 있지만
오늘은 인라인 스타일에 관하여 알아보도록 하겠다.

인라인 스타일

인라인 스타일은 HTML에서 태그 안에 스타일 속성을 추가할때 사용했다.
마찬가지로 리액트에서 컴포넌트 / 일반 태그 안에 스타일 속성을 줄 수 있다.
단, JSX 문법에 의해서 HTML에 적용하던 방법과는 다르다.

• style에 대한 value는 객체 형태이다.
• CSS 속성 이름은 카멜 케이스로 한다.

import React from 'react';

const PracticeStyle = () => {
  return (
    <div style={{marginTop: 10px; backgroundColor: red}}>
      스타일을 적용해보자.
    </div>
  );
}

export default PracticeStyle

인라인 스타일의 문제점

• {} === {}는 false이기 때문에, 리렌더링시에 인라인 스타일이 적용된 컴포넌트 / 일반태그가 다르다고 판단하여 돔을 새로 그리게 되어 불피요한 리로딩이 발생
• style 속성의 재사용성이 떨어짐

해결 방법

• 변수로 설정해 사용

import React from 'react';

const PracticeStyle = () => {
  const style = {
    marginTop: "10px", 
    backgroundColor: "red"
  }
  
  return (
    <div style={style}>
      스타일을 적용해보자.
    </div>
  );
}

export default PracticeStyle

• styled component 사용

import React from 'react';
import styled from 'styled-components';

const DivStyle = styled.div`
  margin-top: 10px; 
  background-color: red;
`;

const PracticeStyle = () => {
  
  return (
    <DivStyle />
  );
}

export default PracticeStyle