[클린코드] 인라인 스타일을 지양하자

인라인 스타일?

HTML 태그 안에 스타일 속성을 추가할때 쓰는 방법중 하나

인라인 스타일을 적용한 간단한 예제 ❗

아래와 같이 적용할 스타일이 많지 않은 경우 인라인 스타일을 즐겨쓰곤 했다.
그리고 무엇보다 편하다

import React from 'react';

const DoCleanCode = () => {
  return (
    <div style={{marginTop: 10px; backgroundColor: red}}>
      인라인 스타일 적용
    </div>
  );
}

export default DoCleanCode

인라인 스타일을 사용하면 00에 좋지 않다 ❗❗

성능에 좋지 않다

인라인 스타일을 사용하게 되면 재랜더링 이슈가 발생한다.
리액트가 재랜더링을 할때, 인라인스타일의 객체의 주소값을 비교하는데 이때 같지 않기에 재랜더링이 되며 성능에 문제가 생길 수 있다.

추가적인 단점

1. CSS 속성의 중복, 재사용성이 떨어진다.
2. 미디어 쿼리, 키 프레임같은 기능을 사용할 수 없다.
3. 프로젝트의 규모가 커지면 유지보수가 어렵다.
4. 코드가 길어지면 코드 가독성이 떨어진다.
5. 리액트 공식문서에서도 추천하지 않는 방법이다.

그러면 어떻게 해결 할까❓

1. Styled Compoents 사용
2. useMemo 사용

   const style = useMemo(() => ({ marginTop: 10px; backgroundColor: red }), []);