분류 전체보기

사용자에게 주의나 줘보자 class App extends Component { f1 =()=>{ alert(`경고창`)//띄워짐 } f2 = ()=>{ console.log( prompt(`입력ㄱㄱ`,`this is default`)//return이 있다. ); } f3 = ()=>{ window.confirm(`confirm`) //리액트에서는 window. 붙여야함 //submit하겠냐? return값이 있다 } ...... 다양한 주의창 onClick안에 익명함수를 선언해서 사용해도 된다. render() { return ( f1 f2 f3 { alert(`gd`) }}>button ); } 주의창의 활용 class App extends Component { f1 =()=>{ alert(`경고창`)..

보호되어 있는 글입니다.

class App extends Component { state ={ num:10 } constructor (){ super()//이것도 상속받은 생성자는 무조건 해라 this.f2 = this.f2.bind(this)//이렇게 해야 함수를 사용할수 있다. } f1 = ()=>{ console.log(`f1 call`); console.log(this.state.num); } f2 = function (){ console.log(`f2 call`); //console.log(this.state.num);//이건 터져 //살찐 애로우만 가능쓰 //살찐 애로우를 사용하면 자동으로 바인딩 된다 } .... f2에서 state를 바인딩을 시켜줘야 사용가능쓰 이거보면 render()안에서 함수사용 b=20//함수..

class App extends Component { render() { return ( App.js App {/*이걸 상속으로 볼수 있는가?*/} ); } } 1. props 2. state : 컴포넌트 내부에서 사용되는 변수! react는 전체를 통틀어 저 두개 가지고 장난치는 거당~ 3. event : 함수 콜 import React, { Component } from 'react'; class App extends Component { n1 = 10; //그냥 필드이름만 주면 됨 state = { n2 : 20 } f1 = ()=>{ console.log(`f1 call`); } render() { return ( App.js ); } } class Bpp extends Component { re..

보호되어 있는 글입니다.

경로를 찾아보자 파일 구조는 다음과 같다. App.js에서 sub com0을 데려오고 com0을 부모로 둔 com1에 같은 부모를 둔 com2를 데려올 것이다. 걍 상위 컴포넌트를 부모라고 표현해따. import React, { Component } from 'react'; import Com0 from './sub/com0' class App extends Component { render() { return ( App.js ); } } export default App; App.js는 com0을 불렀다 import React, { Component } from 'react'; class Com2 extends Component { render() { return ( com2 ); } } export ..

리액트에서는 folder를 import시킬 수도 있다. 여기서 반드시 지켜주어야 할 약속된 파일이 있다. 아무거나 폴더를 하나 만들고 app.js같은 아무 컴포넌트에서 import Sub1 from './sub1' 위와 같이 떨렁 부르면 에러가 걸린다. 이 에러를 잡기 위해서는 반드시 index.js파일이 필요하다. 아마 해당 폴더 안에 index.js를 만들어주면 바로 에러가 풀린다. 무조건 이름이 index.js인 파일이 있어야 한다. 얘를 끌어오려면 폴더명 자체가 태그가 된다. 위의 코드로 예를 들면 원하는 곳에 이렇게 두면 그 폴더의 index.js파일에 있는 컴포넌트가 딸려온다. 여기서 보듯 class의 이름은 바꾸어줘도 된다 근데 파일명은 index.js여야한다. 이 index.js가 하는 역..

App.js는 class이기 때문에 전역 함수를 사용할 수 있다. function f1 (){ //전역 함수 console.log(`f1 call`); } class App extends Component { render() { f1() return ( APP다요 ); } } 뭐 이렇게? 사용하면 된다 근디 다른 파일에 있는 함수를 가져와보자 /* fpp.js */ export function fun2(){ console.log(`f3 call`); } export function fun3(){ //얘는 앞으로 끌어다가 쓸 것이당 console.log(`f3 call`); } /* App.js */ import React, { Component } from 'react'; import Bpp, { Cpp..

/* App.js */ import React, { Component } from 'react'; import Bpp, { Cpp } from './bpp' class App extends Component { render() { return ( APP다요 ); } } export default App; /* Bpp.js */ import React, { Component } from 'react'; class Bpp extends Component { render() { return ( BPP인니다 ); } } class Cpp extends Component { render() { return ( CPP인니다 ); } } export default Bpp; 이렇게 하면 에러가 퐝퐝터진다 밑에꺼 같은!..

다시 한번 더 정리 하즈아 영역을 살펴보까 class App extends Component { //function render() { //javascript code return (//jsx language 져는 APP인대여 ㅇㅅㅇ!!!! ); } } 클래스 내부면 변수와 함수를 선언 할 수 있다. render에서는 javascript code를 사용할 수 있다. return뒤에서는 jsx language를 사용할수있다. 뻑뻒뻑 class Bpp extends Component { render() { console.log(this.props.name); this.props.age = 5 //props의 갱신 안됨 return ( {this.props.age}쨜 ㅇ 3ㅇ {this.props.name}이..

import import React, { Component, Fragment } from 'react'; from 'react'라는 부분에서 default export 해주는 React를 데려온다. 'react'에서 단 하나의 default export해주는 애는 데려왔으니 그 안에 다른 class를 데려오고 싶은 경우에는 어떻게 해야할까? 그럴땐 옆에 쓰여진 것 처럼 { } 스코프를 사용하면 된다. 사용시 주의점은 { } 스코프 안에 있는 것을 불러오고 싶을 때 반드시 export를 시켜줘야한다. /* App,js */ import React, { Component, Fragment } from 'react'; import './App.css' import Bpp, { Test } from './Com..

class 내부에서 함수를 만들고 함수 불러오기 class App extends Component { //함수 만드는 방법 1 f1 (){ console.log(`f1`); } //함수 만드는 방법 2 f2 = function (){ console.log(`f2`); } //함수 만드는 방법 3 f3 = ()=>{ console.log(`f3`); } //함수 안됨 ? -> function +f2 or f3이렇게 하면 안된다 render() {//그린다 render는 함수! return ( 보땅1 보땅2 보땅3 {/* 보땅3 이렇게 부르면 아예 이 페이지가 로드될때 함수가 call 되어버린다 */} ); } }