Front-End(Web)/React - 프레임워크(React, Next)

[React.js] Props

ttaeng_99 2020. 11. 26. 20:49
반응형

🤷 Props(Properties) 란? 

컴포넌트의 정보를 가지고 있는 객체(Object)이다. 상위 컴퍼넌트가 하위 컴퍼넌트에게 전달하는 용도로 주로 사용된다.(반대는 불가!)

 

출처: studyingych 님의 tistory 블로그

📒 Props 선언 및 표시

JSX의 속성과 같이 선언할 수 있으며, 'this.props.속성명'으로 render() 함수에서 표현 가능하다.

import React from 'react';
import ReactDOM from 'react-dom';

class Greeting extends React.Component {
  render() {
    return <h1>Hi there, {this.props.firstName}!</h1>;		// props 표현
  }
}

ReactDOM.render(
  <Greeting firstName='Taeng' />,				// props firstName 선언 
  document.getElementById('app')
);

 

- 다른 모듈에서 컴포넌트를 가져올 때 props 선언

//📂Greeting.js

import React from 'react';

export class Greeting extends React.Component {			// export Component
  render() {
    return <h1>Hi there, {this.props.name}!</h1>;		// use props(name)
  }
}
//📂App.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Greeting } from './Greeting'				// import Component

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>
          Hullo and, "Welcome to The Newzz," "On Line!"
        </h1>
        <Greeting name='taeng' />				// use Component with props(name)
        <article>
          Latest newzz:  where is my phone?
        </article>
      </div>
    );
  }
}

ReactDOM.render(
  <App />, 
  document.getElementById('app')
);

먼저, Greeting이라는 컴포넌트의 'name' props를 리턴하는 기능을 export 한다.

이후, App.js에서 import를 하고, Greeting을 사용하는 부분에서 'name' props의 값을 부여한다.

 

 

- Event Listener를 props 선언하는 경우

 

단순한 컴포넌트 공유보다는 복잡하므로, 각각의 모듈에 대해 부연설명하겠다.

//📂 Button.js

import React from 'react';

export class Button extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>
        Click me!
      </button>
    );
  }
}

Export 모듈: Button 컴포넌트를 내보낸다. <button>의 onClick은 이벤트리스너, {this.props.onClick}은 import 모듈의 onClick props.

 

//📂 App.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from './Button';

class Talker extends React.Component {
  handleClick() {
    let speech = '';
    for (let i = 0; i < 10000; i++) {
      speech += 'blah ';
    }
    alert(speech);
  }
  
  render() {
    return <Button onClick={this.handleClick}/>;
  }
}

ReactDOM.render(
  <Talker />,
  document.getElementById('app')
);

Import 모듈: Button을 가져와 Talker 컴포넌트에서 렌더링한다. onClick이라는 props를 받으면 handleClick() 메소드를 리턴한다. 

 

props명(onClick), 메소드명(handleClick) 작성은 자유이나, props명은 이처럼 이벤트와 연관하여 작성하는것이 보편적이다.

📒 this.props.children

모든 컴포넌트에는 children props가 존재한다. 이는, 컴포넌트가 return하는 부모태그 내의 모든 요소를 반환한다.

두 개 이상의 children은 array 형태로 반환하며, <MyComponent /> 처럼 단일태그인 경우엔 undefined를 반환한다.

 

// 📂 List.js

import React from 'react';

export class List extends React.Component {
  render() {
    let titleText = `Favorite ${this.props.type}`;
    if (this.props.children instanceof Array) {			// children 복수 확인
    	titleText += 's';
    }
    return (
      <div>
        <h1>{titleText}</h1>
        <ul>{this.props.children}</ul>				// children 표현
      </div>
    );
  }
}

Export 모듈: List 컴포넌트를 내보낸다. List JSX의 children이 복수인지(array 형태) 확인, 표현하는 등의 기능이 포함되어 있다.

 

//📂 App.js

import React from 'react';
import ReactDOM from 'react-dom';
import { List } from './List';

class App extends React.Component {
  render() {
    return (
      <div>
        <List type='Living Musician'>
          <li>Sachiko M</li>			// children
          <li>Harvey Sid Fisher</li>		// children
        </List>
        <List type='Living Cat Musician'>
          <li>Nora the Piano Cat</li>		// children
        </List>
      </div>
    );
  }
}

ReactDOM.render(
  <App />, 
  document.getElementById('app')
);

Import 모듈: 두 개의 List 컴포넌트를 확인할 수 있다. 첫 번째는 children이 2개로, <h1>...Fisher+s</h1>로 표현될 것을 예상할 수 있다.

📒 defaultProps

props를 지정해 놓고, 컴포넌트에 명시하지 않으면 따로 디스플레이가 되지 않는다. 이를 방지하기 위한 default값 설정 properties이다.

import React from 'react';
import ReactDOM from 'react-dom';

class Button extends React.Component {
  render() {
    return (
      <button>
        {this.props.text}
      </button>
    );
  }
}

// defaultProps goes here: 선언 없으면 빈 버튼, 선언할 땐 Object 형식 및 key값은 props로!
Button.defaultProps = { text: 'I am a button' };

ReactDOM.render(
  <Button />, 
  document.getElementById('app')
);

이처럼, 클래스 컴포넌트 구문 밑에 default 값을 설정한다. 이는 Object(객체) 형식으로, key 값은 props(여기선 text)로 함을 기억하자.

📌 정리 및 총평

  • Passing a prop by giving an attribute to a component instance
  • Accessing a passed-in prop via this.props.prop-name
  • Displaying a prop
  • Using a prop to make decisions about what to display
  • Defining an event handler in a component class
  • Passing an event handler as a prop
  • Receiving a prop event handler and attaching it to an event listener
  • Naming event handlers and event handler attributes according to convention
  • this.props.children
  • getDefaultProps

props 기능 자체는 어렵지 않으나, 이를 선언하는 방법 및 네이밍 등을 헷갈리지 않게 이해하고자 했다.

 

Export 모듈에서 props를 어떻게 다룰지, Import 모듈에선 props 값을 컴포넌트 태그 안에 작성해야한다.

또, Event Listener과 연관된 props는 props명과 이벤트명을 동일하게 하는 룰을 기억해야겠다.(onClick)

반응형