[React #7] Components와 Props

 

 

 

React 컴포넌트의 단방향 데이터 흐름 (컴포넌트에 값을 전달)

props 는 Properties의 줄임말

 

부모 컴포넌트에서 자식 컴포넌트에 값을 전달할때

자식 컴포넌트에서 부모의 값을 받아올때

 

JSX 문법에서

컴포넌트를 작성할 때 컴포넌트에 속성을 지정할 수 있다. 속성을 지정해주면

각 속성이 하나의 객체로 모여 컴포넌트를 정의한 함수의 첫번째 파라미터로 전달

 

React 컴포넌트는 상위 컴포넌트에서 하위 컴포넌트로 데이터(props)가 흐른다.

하위 컴포넌트는 전달 받은 props를 읽기만 가능하고 쓸수는 없다

 

Components와 Props – React

 

 

함수 컴포넌트와 클래스 컴포넌트

 

JavaScript 함수 작성 시

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

 

 

ES6 class를 사용하여 컴포넌트 정의

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

 

>>React 의 관점에서 볼 때 위 두가지 유형의 컴포넌트는 동일