관심사의 분리_JSX 상에서 Inline-style에 대해

Issue

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class Comments extends Component {
  render() {
    let { name, comment } = this.props;

    let isSkip = false;
    let addVal;
    if (comment.length > 20) {
      comment = comment.slice(0, comment.length - 6);
      isSkip = true;
      addVal = (
        <span style={{ color: '#dee2e6', fontSize: '6px' }}> 더보기...</span>
      );
    }

    return (
      <li className="comment-item">
        <div className="comment">
          <Link to="/login/choi" className="feed-bottom-account profile-name">
            {name}
          </Link>
          <span className="comment-content">{comment}</span>
          {isSkip && addVal}
        </div>
        <button className="comment-heart">
          <img
            src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png"
            alt="heart"
          />
        </button>
      </li>
    );
  }
}

export default Comments;

 

다음 코드는 comment 란에 새로운 댓글을 랜더링하는 컴포넌트이다.

 

props 넘어 온 댓글의 길이가 20을 넘어서게 되면 댓글의 뒷 내용을 삭제하고 '...더보기' 라는 새로운 문자를 추가해주는 연산 과정을 render() 함수에서 선언해주었다. 

 

그 과정에서 스타일을 동적으로 생성해주기 위해서 Inline-style 속성을 사용하였는데

addVal = ( <span style={{ color: '#dee2e6', fontSize: '6px' }}> 더보기...</span> );

해당 코드는 render() 함수 안에서 어떠한 과정이 이루어져야 하며 무엇이 return되는지 다시 생각해봤을 때, 좋지 못한 코드임을 깨달았다.

 

render() 함수는 화면 상에 실제로 보여지는 결과물을 리턴해야 하며 리턴 된 결과물 따라 랜더링된다.

JSX는 HTML 문법을 JS 상에서 표현한 것이기 때문에, 기본적으로 마크업 형식(구조)으로 구성된다.

 

하지만 현재 addVal 변수에 할당 된 태그 내에는 Inline-style 속성이 포함되어 있고 이는 css 상의 style 영역이다.

 

이런 식으로 코드를 작성하여도 실제 랜더링되는 과정에서는 별 문제가 없지만 관심사 분리 관점에서 봤을 때, 리액트의 동작에 성능을 저하시킬 수 있는 요인이 될 수 있다.

 

컴퓨터 과학에서 관심사 분리(separation of concerns, SoC)는 컴퓨터 프로그램을 구별된 부분으로 분리시키는 디자인 원칙으로, 각 부문은 개개의 관심사를 해결한다.

 

특히, Inline-style과 같은 경우는 스타일 적용 우선 순위가 내부 스타일(internal style)과 외부 스타일(external style)보다 높기 때문에 의도치 않은 스타일이 적용된 결과물이 랜더링될 가능성이 있다.

 

이와 같은 이유로, 스타일을 동적으로 추가해야 되는 경우에는 다음과 같이 className에 css-selector를 지정해주는 방식으로 코드를 분립하여 구성하는 것이 더 좋음을 확인할 수 있었다.

addVal = ( <span className="isSkipWord"> 더보기...</span> );

.isSkipWord { color: '#dee2e6', fontSize: '6px' }