Web

클릭하면 숫자가 1씩 증가하는 것을 만들 예정이다. 총 5단계로 나뉘어진다. 일단 App.js에서 이루어진다. import React, { Component } from 'react'; class App extends Component { render() { console.log(`app .js `) return ( {this.props.num} bnt ); } } 이렇게 설정한다 App.js가 받은 props를 받아 사용하기때문에 h1태그에는 this.props.num을 넣어주어따. button을 누르면 onMyClick이 실행되고 h1의 num이 증가된다. 1. action 만들기 const actionTo = (dispatch)=>{ console.log(`action call`); return {..

let obj = { name:`길똥`, age:100, } // let name = obj.name // let age = obj.age const { name, age } = obj //obj에 있는 필드명과 동일한 놈은 담아진다 전역변수이름으로 사용할수있다. 순서 상관없다 console.log(name,age); //몇개만 뽑아와서 쓸수이따 function func1(obj){ const {name,age} = obj console.log(`hihi`,name, age); } func1(obj) const ar = [10,20,30,40] const [t1,t2,t3] = ar console.log(t1,t2,t3); 저번 자바스크립트 잡문법에서 이렇게 했던 기록이 있었다. const dr = [2..

전개 연산자는 어딘가 중간에 같은 요소를 끼워 넣어야 할 때 사용한다. //전개 연산자? : 어딘가 중간에 끼워넣어야함 let ar = [10,20,30,40] let br = [50,ar,60]//중간에 끼워넣어야함 //배열요소 안에 배열이 들어가버림 console.log(br);//[ 50, [ 10, 20, 30, 40 ], 60 ] let cr = [50,...ar,60]//전개 연산자 사용문법 console.log(cr);//[ 50, 10, 20, 30, 40, 60 ] const obj1 = { a:10, b:20, c:30, } const obj2 = { d:40, ...obj1, //여기에 넣고 싶당 e:50, } console.log(obj2);//{ d: 40, a: 10, b: 20..

음 컴포넌트는 보통 class로 이루어져 있다. 함수처럼 컴포넌트를 사용할수도 있다. class ClassComponent extends Component { render() { return ( ); } } 기본적인 클래스형태의 컴포넌트는 위와 같다. 클래스를 선언하고 그안에 랜더함수를 불러서 랜더가 리턴시키는 형식이다. 함수형 컴포넌트를 보쟈 function FunctionalComponent1 (props){//이것도 컴포넌트다 마 return ( {props.a} ) } const FunctionalComponent2 = (props)=>{ return ( {props.a} ) } 이렇게도 활용할 수 있다 rsc snippet을 쓰면 ...더보기 이렇게나온다. import React from 're..

일단 예제부터 볼겨 import React, { Component } from 'react'; class App extends Component { state = { arr : ['멍멍','어흥','냥냥','깎깍'] } render() { console.log(`render`,this.state.arr); const list = this.state.arr.map((v,k)=> this.setState({ arr: this.state.arr.slice(0,k) .concat(this.state.arr .slice(k+1,this.state.arr.length)) }) }} key={k}>{v} ) return ( App.js {list} {//이거는 배열에 더해주기 onDoubleClick this.set..

map()은 다음과 같이 사용한다 let ar = [10,20,30,40]//이거능 기본 console.log(ar); //결과 배열 : 적당하게 가공하여 얻은 let br =ar.map((n)=>{ console.log(n); return n*10 }) console.log(br);//[ 100, 200, 300, 400 ] 배열을 순차적으로 순회하면서 어떠한 것을 수행한다. arr.map(callback, [thisarg]) 일단 map에 줘야할 인수는 위와 같다. let cr =ar.map((n,k)=>{//k는 index번호 console.log(n); return n*k }) console.log(cr); //[ 0, 20, 60, 120 ] let dr = [ {a : 10,b:20} , { ..

사용자에게 주의나 줘보자 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 ..