React props를 이용해 재사용 가능한 컴포넌트 제작

props

React에서 사용자가 새롭게 정의한 컴포넌트를 발견하면 JSX의 속성을 단일 객체로 저장하는데 이때의 객체를 props라고 부른다.

Javascript에서의 객체를 생각하면 이해하기 쉬울 것이다.

Javascript의 자료형 중 하나인 '객체(Object)'

Javascript에서 HTML 태그를 불러올때 DOM을 이용해 객체로 반환되듯이, React에서 JSX에 있는 속성 값을 props에 객체로 반환되는 것이다. 객체이기 때문에 Javascript에서 객체의 프로퍼티 값을 가져오는 방식과 동일하게 사용하면 된다. 대신 props는 읽기 전용으로 사용되기 때문에 중간에 값을 바꿀 수 없다.

재사용성이 매우 떨어지는 코드

function App() {
  return (
    <div className="App">
		<Webhead/>
    </div>
  );
}


function Webhead(){
	return(
		<div>
			<h1>This is React</h1>
			<p>React is ... </p>
		</div>
	);
}

 

위와 같은 코드는 컴포넌트 자체는 재사용 할 수 있지만, Webhead컴포넌트 내부에 정의된 JSX는 값이 고정되어 있어서 재사용하는 의미가 없다. 하지만 props를 이용하면 하나의 컴포넌트로 같은 구조를 유지시키며 다른 값을 렌더링 할 수 있다.

 

props 사용법

사용자가 정의한 컴포넌트 태그를 작성할 때 HTML의 속성처럼 값을 넣으면 된다.

<div class="example"></div> 와 같이 <사용자 정의 컴포넌트 속성1="값1" 속성2="값"...></사용자 정의 컴포넌트> 처럼 작성하면 된다.

그리고 값을 불러올 때는 JSX 규칙을 준수하고( JSX에서 JSX로 만든 Element 객체나 Javascript 값을 사용하기 위해서는 변수를 { } 중괄호 로 감싸야 한다. ) Javascript의 점 표기법을 이용해 props 내의 값을 가져오면 된다.

또한, 함수형 컴포넌트와 클래스형 컴포넌트에서 props를 사용하는 방식이 다르다.

함수형 컴포넌트는 함수에 인자값으로 props를 주고 { props.속성 이름 } 으로 값을 받아온다.

클래스형 컴포넌트는 따로 값을 주는건 없지만 받아올때 { this.props.속성 이름 } 으로 값을 받아온다.

생성한 React 프로젝트 > src > App.js (함수형 컴포넌트 사용)

function App() {
  return (
    <div className="App">
		<Webhead title="This is React" desc="React is ..."/>
    </div>
  );
}


function Webhead(props){
	return(
		<div>
			<h1>{props.title}</h1>
			<p>{props.desc}</p>
		</div>
	);
}

export default App;

 

생성한 React 프로젝트 > src > App.js (클래스형 컴포넌트 사용)

import React, { Component } from 'react'

class App extends Component{
	render()
	{
		return(
			<div className="App">
				<Webhead title="This is React" desc="React is ..."/>
			</div>
		);
	}
}

class Webhead extends Component{
	render()
	{
		return(
			<div>
				<h1>{this.props.title}</h1>
				<p>{this.props.desc}</p>
			</div>
		);
	}
}

export default App;

 

위의 두 코드에서 <Webhead title="This is React" desc="React is ..."/> 는 객체로 반환되어 props에 저장될 것이다.

(아마 이런 느낌..?)

{
	title: "This is React",
	desc: "React is ..."
}

 

이제 JSX에서 속성 값을 바꿔가면서 컴포넌트를 재사용 할 수 있다.

생성한 React 프로젝트 > src > App.js (함수형 컴포넌트 사용)

function App() {
  return (
    <div className="App">
		<Webhead title="This is React" desc="React is ..."/>
		<Webhead title="This is JS" desc="JS is ..."/>
		<Webhead title="This is HTML" desc="HTML is ..."/>
    </div>
  );
}


function Webhead(props){
	return(
		<div>
			<h1>{props.title}</h1>
			<p>{props.desc}</p>
		</div>
	);
}

export default App;

생성한 React 프로젝트 > src > App.js (클래스형 컴포넌트 사용)

import React, { Component } from 'react'

class App extends Component{
	render()
	{
		return(
			<div className="App">
				<Webhead title="This is React" desc="React is ..."/>
				<Webhead title="This is JS" desc="JS is ..."/>
				<Webhead title="This is HTML" desc="HTML is ..."/>
			</div>
		);
	}
}

class Webhead extends Component{
	render()
	{
		return(
			<div>
				<h1>{this.props.title}</h1>
				<p>{this.props.desc}</p>
			</div>
		);
	}
}

export default App;