[React 따라하기 #8] React Props

React Props

 

위치는 html tag 의 attribute 처럼 보입니다.

Props 는 읽기전용입니다. 값을 바꿀 수 없습니다. this.props.name = 'ok google'; 하면 오류!

See the Pen test1 by Seunggeun Oh (@seunggeun-oh) on CodePen.

결과는 Hello bryan!

 

만약에 props 명이 일치하는게 없다면 어떻게 될까요?

위 codepen 에서 <Hello age="12" /> 로 바꾸면 결과는 Hello !

오류는 아니고 그냥 empty 공백으로 나옵니다. 

 

- 파라메터로 props 값 전달.

See the Pen RwNZOpy by Seunggeun Oh (@seunggeun-oh) on CodePen.

선언은 var, let, const 가능합니다만 변경할 수 없는 상수는 const 로 선언합니다.
전역변수로 선언하고 사용은 {변수명}  으로 중괄호로 감싸면 됩니다.

 

- Object 값으로 전달.

const param_name = {first:'bryan', last:'oh'};	// 이렇게 object 형식으로 바꾸면

class Hello extends React.Component {
  render() {
    return <h2>Hello {this.props.name.first} {this.props.name.last}!</h2>; // 이렇게 사용.
  }
}

ReactDOM.render(<Hello name={param_name} />, document.getElementById('root'));

이런식으로 {first:'bryan', last:'oh'} 처럼 object 형식으로 넘길 수 있습니다.

 

- constructor 로 props 전달.

See the Pen construntor_props by Seunggeun Oh (@seunggeun-oh) on CodePen.

 

 

2019/12/27 - [HTML,Javascript] - [React 따라하기 #1] React 개발에 필요한 도구 설치

2019/12/30 - [HTML,Javascript] - [React 따라하기 #2] React 시작하기 hello world!

2019/12/30 - [HTML,Javascript] - [React 따라하기 #3] Codepen에서 실행해보기

2019/12/30 - [HTML,Javascript] - [React 따라하기 #4] ES6, js Class 에 대한 간단한 설명

2019/12/30 - [HTML,Javascript] - [React 따라하기 #5] React JSX

2019/12/30 - [HTML,Javascript] - [React 따라하기 #6] React Components(컴포넌트)

2019/12/30 - [HTML,Javascript] - [React 따라하기 #7] React Components(컴포넌트) 참조하기

 

2019/12/31 - [HTML,Javascript] - [React 따라하기 #9] React State

2020/01/02 - [HTML,Javascript] - [React 따라하기 #10] React 기본 함수 (life cycle)

2020/01/02 - [HTML,Javascript] - [React 따라하기 #11] React Event 리액트 이벤트