[2024.08.27] React

경로이동

C:\vscode\myProject01\test01 (내가만든 프로젝트)

 

npm start 로 실행

 

참고자료

https://velog.io/@sua_ahn/React-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95-%EB%B0%8F-%EC%8B%A4%ED%96%89-Node.js-VS-Code

 

//rcs,rsf 엔터하면 아래 자동으로 쳐짐
//react.js
//1. 대장 클래스(1개) 
//2. 쫄따구 클래스(n개 존재할수 있다.)

import React, { Component } from 'react';


//함수형(1988)-> 클래스형(2000)+라이프사이클-> 함수형(2024)+라이프사이클/hook(s)
//함수형 컴포넌트 : function App(){}
//클래스형 컴포넌트 : App()=>{}
//람다형 컴포넌트 : class App extends Component{}



//Component(부품) + 부품 가능
//Component==window==컨트롤
class App extends Component {
  //1. 생성자
  //2. 멤버 변수(field)
  //3. 멤버 함수(method)

  render() {
    //js 문법 사용 가능

    return (
      //JSX 문법
      <div>
        <h1>호랑이</h1>
        <h1>호랑이</h1>
      </div>
    );
  }
}

export default App; //현재 대장은 App입니다(대장 이름 바꾸면 index.js에서도 바꿔야한다)

 

 

 

 

---

import React, { Component } from 'react';

class App  extends Component {
  constructor(){
    //super은 반드시 첫줄에 들어와야해서 다른코드는 아무것도 못들어옴
    super()
    console.log(1,'생성자 콜');
    this.state={}
  }

  f1(){}
  f2(){}

//생명주기 함수
  static getDerivedStateFromProps(){
    console.log(2,'getDerivedStateFromProps');
    return {};
  }

  componentDidMount(){
    console.log(4,'componentDidMount');
    
  }

  render() {
    console.log(3,'render  콜');
    return (
      <div>
        <h1>App</h1>
      </div>
    );
  }
}

export default App;

출력 1234

import React, { Component } from 'react';
// 1. 내부함수
// 2. IIFE(즉시실행함수)
// 3. 클래스 함수
// 4. 생성자 함수
class App extends Component {
  f1(){ console.log(1);}
  f2 = function(){console.log(2);}
  f3 = ()=>{console.log(3);}
  render() {
    this.f1(); this.f2(); this.f3();
    function f4(){console.log(4);}
    let f5 = function(){console.log(5);}
    let f6 = ()=>{console.log(6);}
    f4();f5();f6();
    //
    ( ()=>{console.log(7)} )();
    ( function(){console.log(8)} )();
    //
    let obj = {
      f9: function(){console.log(9);},
      f10: ()=>{console.log(10);},
      f11(){ console.log(11); }
    }
    obj.f9();obj.f10();obj.f11();
    function F12(){
      this.f13 = function(){console.log(13);};
      this.f14 = ()=>{console.log(14);};
    }
    F12.prototype.f15 = function(){console.log(15);};
    let inst = new F12();
    inst.f13(); inst.f14(); inst.f15();
    class F16{ // 람다, 일반, 약식
      f17(){console.log(17);}
    }
    let inst2 = new F16();
    inst2.f17();
    return (
      <div>
        <h1>호랑이</h1>
      </div>
    );
  }
}

export default App;

---

import React, { Component } from 'react';

// 클래스{
//  멤버변수
//  멤버함수(){
//     내부함수(){
// >>>>>>>> 멤버변수(this)
//     }
//  }
//}

class App extends Component {
  num = 1000;
  f1(){ console.log(this.num); }
  f2 = function(){ console.log(this.num); }
  f3 = () => { console.log(this.num); }
  f4(){
    //let temp = this;
    ( function(t){
      console.log(t.num);
    } )(this);
  }
  f5(){
    ( function(){
      console.log(this.num);
    }.bind(this) )();
  }
  f6(){
    ( ()=>{
      console.log(this.num);
    } )();
  }  
  render() {
    return (
      <div>
        <button onClick={ ()=>{this.f1()} }>버튼1</button>
        <button onClick={ ()=>{this.f2()} }>버튼2</button>
        <button onClick={ ()=>{this.f3()} }>버튼3</button>
        <button onClick={ ()=>{this.f4()} }>버튼4</button>
        <button onClick={ ()=>{this.f5()} }>버튼5</button>
        <button onClick={ ()=>{this.f6()} }>버튼6</button>
      </div>
    );
  }
}

export default App;