⭐ 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부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용합니다.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() { ..
6. 이벤트 연결 v-on : 해당 디렉티브를 사용해 이벤트 메소드와 연결할 수 있다. 1씩증가 {{ count }} 한번만 클릭 가능 {{ text }} 10씩증가 {{ tenCount }} 1씩 증가, 한번 클릭, 10씩 증가 7. 조건문 v-if, v-else-if, v-else v-if 를 사용해서 프로퍼티를 이용해 조건을 주어 HTML을 표현할 수 있다. one two three one check two check three check 조건문에 따른 실행 결과 8. 반복문 v-for : 배열로 이루어진 프로퍼티를 반복적으로 표현할 때 사용한다. {{ item }} {{ key }} : {{ value }} {{ item.a}} : {{ item.b }} : {{ item.c }} add dele..
