프로그래밍 공부 노트

리액트의 class 컴포넌트에서 다루는 데이터는 두개로 나뉜다.  props와 state이다. 모든 언어에서는 재활용성과 중복의 제거를 중요시한다고 배웠다.  이러한 재활용성과 중복의 제거를 토대로 코드의 재활용성을 높이기위해서 사용된것이 props이다.  props 작성된 컴포넌트에 props를 통해 부모컴포넌트에서 자식컴포넌트로 값을 전달하면 내가 원하는 값이 자식 컴포넌트에서 작성한 템플릿에 값을 넣어 반환한다. props는 html코드에서 attribute(속성)과 비슷한 형태로 작성되고 이렇게 작성된 props로 전달되는 값을 자식 컴포넌트에서 {this.props.속성명}으로 부모컴포넌트에서 전달한 props 값을 전달 받아 출력한다. 아래의 예제를 보면  App.js 는 부모컴포넌트 Introduce.js 는 자식 컴포넌트 App.js import React , { Component } from 'react' ; import Introduce from './Introduce' ; export default class App extends Component { render () { return ( < div > < Introduce name = '리액트' age = '100' />< br /> < Introduce name = '자바스크립트' age = '200' gender = '중성' />< br /> < Introduce name = 'CSS' age = '300' gender = '남자' />< br /> < Introduce name = '컴포넌트' age = '