들어가기 전에

이전시간에 리액트의 가장 중요한 컴포넌트를 만드는 방법을 살펴보았습니다.

이제 우리가 만든 컴포넌트를 다른 웹페이지나 패키지로 만들어서 인터넷에 올리면 다른사람들이 여러분이 정의한 태그를

자신의 애플리케이션에서 사용할 수 있게 됩니다. 

이번 시간에는 우리가 정의한 태그를 더 똑똑하게 리팩토링하는 시간입니다.

학습목표

리액트의 props를 이해하고 컴포넌트에 적절하게 활용할 수 있습니다.

핵심단어

•  props
• 리팩토링

강의 듣기

우리가 만든 <Subject> 컴포넌트를 하나 더 추가해보겠습니다. 

우리가 만든 <Subject> 라고 하는 태그는 언제나 똑같은 결과를 보여줍니다.

하지만 <a> 라고 하는 link 태그는 이것이 태그인 것을 알려주고 동시에 어떤 주소랑 연결되는지를 표현해줍니다.

"href"라는 속성(attribute)을 통해서 각각의 링크에 주소를 표현하고 있습니다.

즉 태그의 이름이라는 공통점과 이 속성이라는 차이점을 통해서 재사용성이 굉장히 높은 부품을 만들 수 있게 됩니다.

자 그럼 이제 우리는 어떤 꿈을 꿀 수 있을까요?

예를 들어 <Subject>에 title 이라는 속성을 붙여서 "WEB" 이라고 하면 web이 나타나고

sub라는 속성을 붙여서  텍스트가  나올수있다면 얼마나 좋을까요?

이 꿈의 해답은 리액트 매뉴얼에 적혀있습니다.

공식 문서로 들어가서 메인 컨셉에 들어가면 "Components and Props"를 클릭하면 컴포넌트를 만드는 법이 나와있습니다.

title="WEB"이라는 속성을 사용할 수 있도록 약속된 jsx의 기호는 {this.props.title} 입니다.

HTML에서 속성이라고 하는 것은 리액트에서 "props" 라고 합니다.

class Subject extends Component {
  render() {
    return ( 
      <header>
        <h1>{this.props.title}</h1>
        {this.props.sub}
      </header>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="world wide web!"></Subject>
        <TOC></TOC>
        <Content></Content>
      </div>
    );
  }
}

바뀐 코드를 실행시키면 똑같은 결과가 나오지만 내부적으로 훨씬 효율적으로 바뀌었어요. 이 것을 "리팩토링" 했다고 표현합니다.

<Subject>는 매번 똑같은 결과를 나타냈지만 위의 코드로 리팩토링함으로써 title="react" , sub="for ui"라고 바꾸게 되면

title의 값과 sub의 값이 <Subject> 컴포넌트의 입력값이 되어 입력 값에 따라 달라지는 출력값을 화면에 표시하게 됩니다.

마찬가지로 <Content> 부분을 수정해보겠습니다.

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="world wide web!"></Subject>
        <TOC></TOC>
        <Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
      </div>
    );
  }
}

class Content extends Component{
  render(){
    return(
      <article>
        <h2>{this.props.title}</h2>
        {this.props.desc}
      </article>
    );
  }
}

웹 브라우저 상에서 똑같이 동작하지만 전달 받은 props를 바탕으로 서로 다른 결과를 만들어내는

훨씬 더 똑똑한 컴포넌트를 만들 수 있게 되었습니다.

생각해보기

 <TOC> 컴포넌트의 props를 추가해보세요.