리액트 컴포넌트에서 데이터 다루기(1) props

정의

리액트 컴포넌트에서 데이터를 다루는 방법은 2가지가 있다.

1. props ( 값을 안주면 default value : true ) 

2. state

 

props는 부모 컴포넌트(import받는 컴포넌트)에서 자식 컴포넌트(export하는 컴포넌트)로 데이터를 넘겨주는 용도로 사용한다.

자식 컴포넌트에서 수정은 불가능하고 부모 컴포넌트에게서 받을 수만 있는 값이다. (가능해도 하지 마세요. 코드 엄청 복잡해집니다.)

state는 컴포넌트 내부에서 선언하여 내부적으로만 값을 변경할 용도로 사용한다.

props 구현

// App.js
import React, { Component } from 'react';
import MyName from './MyName';

class App extends Component {
	render() {
		return (
			<MyName name="react"/>
		);
	}
}

export default App;

app.js는 여기서 부모 컴포넌트로 쓰였다. 왜냐하면 MyName컴포넌트를 import 받고 있기 때문이다.

부모 컴포넌트에서 props로 값을 넘겨주려면 <자식클래스명 key="value" /> 형태로 넘겨주어야 한다.

여기서는 <MyName name="react">이다.

해석하면, MyName 컴포넌트에 name이라는 이름으로 react라는 값을 넘겨줘라. 라는 뜻이다.

 

// MyName.js
import React, { Component } from 'react';

export default class MyName extends Component {

	static defaultProps= {
		name: '기본이름'
	}

	render(){
		return(
			<div>안녕하세요! 제 이름은 <b>{this.props.name}</b>입니다.</div>
		)
	}
}

// MyName.defaultProps = {
// name: 'velopert'
// }

자, 이번엔 app.js에 export했던 MyName.js를 살펴보자. app.js입장에서 MyName.js는 자식 컴포넌트이다.

부모 자식이라고 표현하고 있긴 하지만 이는 상속과는 다른 얘기이니 혼동하지 말자.

부모에게서 받은 props값을 받기 위해서는 this.props.prop이름으로 받으면 된다.

this.props 가 부모 컴포넌트에게서 해당 key를 찾아 값을 가져올 것이다.

 

만일, 부모가 해당 key값의 props를 제공하지 않았을 경우를 대비하여 기본값을 설정해 놓자.

defaultProps를 사용하면 된다.

이는 인스턴스프로퍼티가 아닌 클래스 프로퍼티로 작성해놓는다. 변하지 않는 값이고 인스턴스마다 복제할 이유가 없는 녀석이기 때문이다.