김방울

See the Pen 버튼 클릭이벤트 만들기: 스텝 카운터 by KIMBANGUL (@KIMBANGUL) on CodePen. HTML JS(Babel) class App extends React.Component{ constructor(props){ super(props); } render(){ return } } class MyButton extends React.Component{ constructor(props){ // 맨 처음 딱 한번만 실행되고 실행되지 않는 함수. 클래스가 가지고 있는 속성을 정리하는 역할로 사용. super(props); this.state = {}; this.state.count = 0; } 함수(){ // this.setState({ // count: this.state..

See the Pen 버튼 클릭이벤트 만들기 by KIMBANGUL (@KIMBANGUL) on CodePen. HTML JS(Babel) class App extends React.Component{ constructor(props){ super(props); } render(){ return } } class MyButton extends React.Component{ constructor(props){ super(props); this.state = {}; this.state.count = 0; } render(){ return {this.props.buttonName} [클릭 카운트: {this.state.count}] // 함수()는 MyButton에 소속되어 있는 함수, 이 함수를 에 빌려주었..

See the Pen JjGoemv by KIMBANGUL (@KIMBANGUL) on CodePen. A:only-child : A 엘리먼트는 그 부모의 유일한 자식 A:not(B) : B가 아닌(B속성을 가지지 않은) A만을 선택. nav.menubar > ul > li > a:not(:only-child)::after{ content:" [+]"; font-size: 1.5rem; } nav.menubar > ul > li:hover > a:not(:only-child)::after{ content:" [-]"; } nav.menubar ul.submenu > li > a:not(:only-child)::after{ content:" [+]"; font-size: 1rem; } nav.menubar..

See the Pen 버튼 클릭이벤트 만들기 by KIMBANGUL (@KIMBANGUL) on CodePen. HTML JS(Babel) class App extends React.Component{ constructor(props){ super(props); } render(){ return } // CamelCase: 단어+단어 일때 뒤 단어의 첫 글자는 대문자로 표현 // 속성으로 접근. } class MyButton extends React.Component{ constructor(props){ super(props); } render(){ const style = { width: "70px", height: "50px", "background-color": "orange", color: "wh..

사각형 이용해서 버튼 만들기 See the Pen 사각형 이용해서 버튼 만들기 by KIMBANGUL (@KIMBANGUL) on CodePen. HTML JS(Babel) class App extends React.Component{ constructor(props){ super(props); // constructor -> 생성자, 설계도, 틀. 엘리먼트를 생성한다. } render(){ return } } class Mybutton extends React.Component{ constructor(props){ super(props); } render(){ return {this.props.buttonName} } } class Square extends React.Component{ constru..

See the Pen react_사각형 2개 만들기 by KIMBANGUL (@KIMBANGUL) on CodePen. HTML JS(Babel) class App extends React.Component{ constructor(props){ super(props); } render(){ return( {' '} ) } // {' '}으로 공백을 만들어줄 수 있음. // Square 태그를 생성하는 App 태그 생성 } // 반드시 태그의 첫 문자는 대문자로 class Square extends React.Component{ constructor(props){ super(props); } render(){ const style ={ width:"100px", height:"100px", 'backgro..

리액트 props 기초 See the Pen 리액트 props 기초 by KIMBANGUL (@KIMBANGUL) on CodePen. HTML 안녕 JS(Babel) console.clear(); class App extends React.Component{ constructor(props){ super(props); console.log(this.props.name); } render(){ return ( 안녕하세요, {this.props.name}님. ); } // 싱글 태그 사용 불가 ---> // 여러 줄로 쓸 때는 괄호로 묶기 // 하나의 부모 엘리먼트로 묶어주어야 함. // 자바스크립트 표현식은 중괄호로 } // 상속: 리액트 컴포넌트에 있는 기능을 가져와서 class app에 넣겠다. //..

function 으로 component 만들기 See the Pen function으로 component 만들기 by KIMBANGUL (@KIMBANGUL) on CodePen. HTML JS(Babel) console.clear(); function MyTag(props){ console.log(props.name); return Hello, {props.name}!; } // JSX ReactDOM.render(, document.getElementById('root')); // 태그네임은 대문자로 시작해야 함. (my-tag는 불가) class MyTag2 extends React.Component{ render(){ return Hello, {this.props.name}!; } } ReactD..