⭐ Stateprops를 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용 했다면, state는 하나의 컴포넌트 안에서 전역 변수처럼 사용합니다.1. state 사용하기class State extends React.Component { constructor(props) { super(props); this.state = { stateString : props.program, stateVersion: "18.2.0" }; } render() { return ( {this.state.stateString} {this.state.stateVersion} ) }}class App2 extends React.Compon..
⭐ Props컴포넌트 속성 전달하기Component1 -> Component2 -> Component3 내용 전달 1. 단계 1class Component3 extends React.Component { render() { return ( {this.props.color} {this.props.name} {this.props.size} ) }}class Component2 extends React.Component { render() { return ( ) }}class Component1 extends React.Component { render() { return ( ) }}ro..
⭐ Props- props를 사용한 컬러 팔레트 만들기 1. 단계 1컴포넌트를 화면에 배치class ColorPalette extends React.Component { render() { let paletteStyle= { display: "inline-block", marginRight: 10, width: 100, height: 100, backGroundColor: '#fff', boxShadow: "1px 1px 2px rgba(0,0,0,2)" }; return ( ) }}root.render( ) 2. 단계 2ColorPalette 컴포넌트에 ColorChip 컴포넌트 추가class ColorChip ..
⭐ Props 1. props를 객체형으로 사용하기class Props extends React.Component { render() { let {propsValue} = this.props; return ( {JSON.stringify(propsValue)} {propsValue.program} {propsValue.version} ) }}class App2 extends React.Component { render() { let h1Style = { fontWeight: "normal" } return ( React Example ); }}r..
⭐ props부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용합니다.props를 전달받은 자식 컴포넌트에서는 데이터를 수정 할 수 없습니다.데이터를 변경하기 위해서는 컴포넌트 내부에서만 사용하는 변수에 값을 넣어 사용해야 합니다1. props 사용하기.class Props extends React.Component { render() { // console.log(this.props); let propsValue = this.props.propsValue; propsValue+=" from App Component."; return ( {propsValue} ); }}class App2 extends React.Component { render() { ..
⭐ EcmaScript6 1. forEach() 함수 사용하기배열 함수 forEach()는 for 구문에서 사용하던 순번과 배열의 크기 변수를 사용하지 않습니다.class ForEach extends React.Component { componentDidMount() { let forArray=[3, 2, 8, 8]; let forNewArray=[]; for(let i=0; i { // console.log(result); forEachNewArray.push(result); }); console.log("2. forEachNewArray : ["+forEachNewArray+"]"); } render(){ let h2Style={ ..
⭐ EcmaScript6 1. 전개 연산자(...) 사용하기전개 연산자는 배열이나 객체를 좀 더 직관적이고 편리하게 합치거나 추출할 수 있게 도와주는 문법입니다.변수 앞에 마침표 3개(...)를 입력해 사용합니다.class SpreadOperator extends React.Component { componentDidMount() { //javaScript Array var varArray1=["num1", "num2"]; var varArray2=["num3", "num4"]; var sumVarArray=[]; sumVarArray=sumVarArray.concat(varArray1, varArray2); console.log("1. sumVarArray : "+su..
⭐ EcmaScript표준화된 스크립트 언어, 숫자는 버전을 의미ES6는 많은 기능이 추가 되었고, React에서도 모든 기능을 사용할 수 있습니다.1. 템플릿 문자열 사용하기문자열과 변수를 합치기 위해서는 문자열을 따옴표로 감싸고 +로 연결따옴표가 아닌 백틱(')으로 전체 문자열과 변수를 묶어 사용할 수 있습니다.변수는 ${변수명} 형태로 넣고 코드상에서 줄바꿈을 하면 개행 문자 없이도 사용할 수 있습니다.class ES6 extends React.Component { componentDidMount() { var jsString1 = "JavaScript"; var jsString2 = "입니다. \n 다음줄 입니다."; console.log(jsString1+" 프로그래밍"+jsS..
