프로그래밍 공부 노트

자식 컴포넌트 state 값 부모컴포넌트로 전달하기 방법을 간단히 보면 부모 컴포넌트에 함수를 정의하고 해당 함수를 자식 컴포넌트의 props로 전달한다. props로 전달된 함수를 호출해서 자식컴포넌트의 값을 부모 컴포넌트로 전달하도록 한다. App.js (부모 컴포넌트) import React , { Component , Fragment } from "react" ; import Child from "./components/Child" ; class App extends Component { handleData = ( data ) => { console . log ( data ); }; render () { return ( < > < Child sendProps = {this . handleData } /> </ > ); } } export default App ; Child.js (자식 컴포넌트) import React , { Component } from "react" ; export default class Child extends Component { state = { name : "" , age : "" , }; handleChange = ( e ) => { this . setState ({ [ e . target . name ]: e . target . value , }); }; handleSubmit = ( e ) => { e . preventDefault (); { this . props . sendProps ( this . state ); } }; render () { retu

리액트의 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 = '