⭐ Create React App컴포넌트 매핑 이해하기1. 단계 1src/DataComponent.jsclass DataComponent extends React.Component { render() { let ulStyle = { marginTop : 15 } let liStyle = { lineHeight : 1.8 } return ( member1 member2 member3 ) }} 2. 단계 2src/App.js class App extends Com..
⭐ React EventJavaScript에서의 이벤트를 React에서도 사용 할 수 있습니다.1. 단계 1class CounterText extends React.Component { render() { let textStyle = { paddingBottom: 20, fontSize: 36, color: "#333" }; return ( {this.props.countProps} ) }}class App2 extends React.Component { constructor(props) { super(props); this.state= { count: 0 } } countPlus() { ..
⭐ JSX에서의 배열 1. 단계 1class Round extends React.Component { render() { let roundStyle = { display: "inline-block", margin:10, width: 100, height: 100, backgroundColor: this.props.backgroundColor, borderRadius: 50 } return( ) }; }root.render ( ) 2. 단계 2class Round2 extends React.Component { render() { let roundStyle = { display: "inline-bl..
⭐ 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..
★ 문제 정수 N개로 이루어진 수열 A와 정수 X가 주어진다. 이때, A에서 X보다 작은 수를 모두 출력하는 프로그램을 작성하시오. 첫째 줄에 N과 X가 주어진다. (1 ≤ N, X ≤ 10,000) 둘째 줄에 수열 A를 이루는 정수 N개가 주어진다. 주어지는 정수는 모두 1보다 크거나 같고, 10,000보다 작거나 같은 정수이다. ★ 소스코드 import java.util.ArrayList; import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner scan = new Scanner(System.in); int size = scan.nextInt(); int num = scan.nextInt(..
