뭘 놓쳤을까? - react props

지금 까지 알고 있었던 react props 는 오직, document 에 예시로 올라온 그 props 만 알고 있었습니다.

 

아래의 이 코드들 말이죠.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

그리고 컴포넌트 렌더링은 이런 식으로 예시가 나와있습니다.

function Welcome(props) {  
	return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;ReactDOM.render(
  element,
  document.getElementById('root')
);

 

그런데 독학으로 지금까지 오신 분들이라면 어쩌면 처음 볼 지도 모르는 유형이 있을거라 생각됩니다.

아래 코드의 constructor 생성자 다음의 state 부분에 template literal 을 사용해서, string 이 아닌, props 로서 참조 하도록 표현식이 작성 된 경우 입니다.

import React, { Component } from 'react';
import Img from 'gatsby-image';
import cx from 'classnames';

import styles from './imagery.module.scss';

export class Imagery extends Component {
  constructor(props) {
    super()
    this.state = {
    // props 가 쓰이긴 쓰였는데, 좌우로 ``backtick 이 있습니다.
      sizer: `styles.${props.size.toLowerCase()}`
    }
  }
  render() {
    return (
      <React.Fragment>
        <Img
          className={cx([this.state.sizer], {
            [styles.firstImage]: this.props.firstImage,
          })}
          fluid={this.props.image}
        />
        {this.props.caption ? (
          <p className={styles.caption}>{this.props.caption}</p>
        ) : (
          false
        )}
      </React.Fragment>
    );
  }
}

export default Imagery;

Pass a template literal into props as an expression and not a string

이게 도대체 왜 쓰인 걸까?

우선 문제를 세분화 해서 알아보았습니다.

먼저, 저 template literamls (또는 template string) 은 무엇일까요?

Template literals (Template strings) - JavaScript | MDN

Along with having normal strings, template literals can also contain other parts called placeholders, which are embedded expressions delimited by a dollar sign and curly braces: ${expression}. 

저 ${expression} 같이 달러 사인과 함께 curly bracket (이거 -> {}) 을 사용해서, 그 내부에 props 명들을 여러개 나열하며 코드를 구성한 경우라고 이해 할 수 있겠습니다.

 

예시를 다시 보면, 분명히 달러 사인 안에 curly bracket 으로 감싸져 있습니다.

sizer: `styles.${props.size.toLowerCase()}`

 

이걸 사용 하는 방법은?

정확히는, "어떨 때 사용할 수 있을까?" 라고 볼 수도 있겠습니다.

더 생소한, 생전 처음보는 코드를 하나 참고용으로 가져와 봤습니다.

마찬가지로, 문제의 리터럴 템플릿 표현식을 사용 한 경우입니다.

...
return () {
    <div>
      <SomeComponent key={`some-${someVariable}`} />
      <AnotherComponent />
    </div>
}

 

JavaScript React Syntax - Template literal inside component props breaks highlighting · Issue #51171 · microsoft/vscode

그런데 잠깐! 이거, 왠지 낯익은 방식입니다.

만약 당신이 금융 과목을 대학 때 한번이라도 들어 봤다면,

꽤 높은 확률로 다뤄 봤을 그 엑셀에서 쓰이는 매크로 함수가 떠오르지 않나요?

당시에는 뭐가 뭔지 몰라도, '메크로 였고, 뭔가 체인 역할 비슷한 걸 했었다!' 라는 것만은 확실하게 기억에 남습니다.

 

저는 그것과 비슷하다고 봅니다. 지금 저 리터럴 템플릿 표현식 중에, {`some-${someVariable}`} 이라고, 달러사인 옆에 dash(-) 가 있습니다. 어쩌면 저걸 토대로, 해당 함수가 자동적으로 생성되도록 하는 create instance 같은 기능이 구현 될 예정 인 건지도 모르겠습니다.

<section 
    class="slider" 
    data-slick={`{"slidesToShow":${props.number},"autoplay": ${props.autoplay},  "responsive": [{"breakpoint":${props.breakpoint},"settings":{"slidesToShow": ${props.show}}}]}`}
>

template literals in jsx

그래서, 이거 왜 사용하죠?

저도 알아 보면서, 감은 오는데 이걸 써야 한다니 하면서 극혐 언제 사용하나에 대해 고민을 해보며 이리저리 알아 봤습니다. 이 리터럴 템플릿은 다음과 같이 그 필요성에 대해 설명 한 분이 있습니다.

플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다.
템플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공합니다.
ES2015 사양명세서에선 template strings라고 불렸습니다.
템플릿 리터럴은 런타임 시점에 일반 자바스크립트 문자열로 처리/변환됩니다.

프론트엔드에서는 HTML을 데이터와 결합해서 DOM을 다시 그려야 하는 일이 빈번하기 때문에, 템플릿을 좀 더 쉽게 편집하고 작성해야 할 필요가 있어서, 이러한 기능이 추가되었습니다.(자바스크립트 자체적으로 지원하기 전에도 라이브러리로 존재했습니다.)

참고 (추천)

 

[JavaScript] ES6 템플릿 리터럴에 대해 알아보자!!

 

How to use Props in React

비고.

여기에서 좀 더 나아가면 dependecy 고려 요소도 있던데, 그건 useEffect 때 다뤄보겠습니다.