본문 바로가기

리액트제이에스

[react.js]props.children 사용법 설명하는 것보다 간단한 예제로 이해하는 것이 좋을것 같아요. App.js 첫번째 App.js 를 아래와 같이 구현할것 import React, { Component } from 'react'; class App extends Component { render() { return ( App ); } } export default App; Child_test.js 테스트할 children 파일을 생성 import React, { Component } from 'react'; class Child_test extends Component { render() { return child_test; } } export default Child_test; App.js 에 Child_test.js 연결 import R.. 더보기
[react.js]defaultProps 사용방법 기본으로 props 형태를 선언해주지 않았을때 기본으로 실행하게끔 할 방법 import React, { Component } from 'react'; class App extends Component { static defaultProps = { question: '사랑' }; render() { return ( 믿음, 소망, 사랑 중 그 중의 제일은 {this.props.question}이라 ); } } export default App; 이런 형태로도 써줄 수 있습니다. import React, { Component } from 'react'; class App extends Component { render() { return ( 믿음, 소망, 사랑 중 그 중의 제일은 {this.props.ques.. 더보기
[react.js]style css 표현방법 style css 표현법 우선 일반적인 형태는 이런식으로 씁니다. import React, { Component } from 'react'; class App extends Component { render() { const textcolor = { color: '#666' }; const colorname = '회색'; return ( 제가 선택한 컬러는 {colorname}입니다. ); } } export default App; 이렇게 변수 선언 없이 태그 안에서 바로 쓸수도 있습니다. import React, { Component } from 'react'; class App extends Component { render() { const textcolor = { color: '#666' }; c.. 더보기
[react.js]IIFE 함수 IIFE 함수 Imediately Invoked Function Expression JSX 안에서 함수를 실행시키고 싶을때 사용. 권장하는 방법은 아님 { (function(){ alert('test'); })() } 더보기