React 12. class를 이용한 옛날 옛적 React문법

지금은 잘 안쓰이지만 가끔씩 보이는 옛날 문법인 class를 보고 이해할수있으면 좋다.

컴포넌트만들고, 함수만들고, state를 만들고 변경은 어떻게 했는지 알아보자.

function App(){
  return (
    <div>
      HTML 잔뜩있는 곳
      <Profile />
    </div>
  )
}

class Profile extends React.Component {
  constructor(){
    super();
  }

  render(){
    return (
      <div>프로필영역입니다</div>
    )
  }
}

1. 클래스 하나 만들고 이름짓고
2. React.Component를 extends하고
3. constructor(){} 함수를 언급하고
4. render(){} 안에 원하는 HTML을 적고

원하는 위치에 작성

// 클래스는 데이터/함수 보관하는 덩어리
// React.Component는 컴포넌트 성질을 갖고 있는 덩어리
// 클래스는 여러개의 데이터나 함수를 한 곳에 보관하고 싶을 때 쓰는 문법
class Profile extends React.Component {
  constructor() { 
    // 이부분은 변수와 함수가 가득한 클래스 덩어리를 만들때, 새로운 변수를 넣는 공간
    // super 밑에 state를 만들 수 있다.
    // 1. state 저장할땐 컨스트럭터 안에 this.state 변수에 전부부관.
    // 2. 꺼내 쓸 때는 this.state.state명
    super();
    this.state = { name: 'Kim', age: 30 }
  }

  changeName = () => {
    this.setState( { name: "hahahaa"});
  }
  // ()=> {} 과 function(){} 은 거의 같은 의미이지만 this의 뜻에 의미 차이가 있다
  // arrow function을 쓴다면 안에 쓰는 this 값을 재정의 해주지 않는다.
  // 바깥에 있던 this값을 그대로 끌고 와서 사용한다.
  // function(){}으 쓰면 this값이 새롭게 변화함.
  // arrow function은 내부의 this키워드 값을 변화시키지 않고 싶을 때 사용함


  render() {
    return (
      <>
        <div>클래스문법으로 작성했습니다.</div>
        {/* state값을 바꾸는 법: this.setState */}
        <div> {this.state.name} </div>
        // <button onClick={ () => {this.setState( {name: 'Park'} )}}> 버튼 </button>
        // 주의) 신문법으로 만든 변경함수들은 아예 대체를 해주는건데, 예전문법 setState는 딱 필요한 부분만 수정하고 나머지 부분은 건들지 않는다. 그래서 그나마 장점으로 신문법에서 하고 있는 아래의 절차를 밟지 않아도 된다.
        //1. state복사본 만들고
        //2. 수정하고
        //3. 복사본을 삽입
        <button onClick={ this.changeName } > 버튼 </button>
        
        //버튼안의 코드가 너무길어 따로 함수를 빼서 만들 수있음. this 사용 필수

        
      </>
    );
  }
}

오늘의 교훈 : 신문법을 씁시다.

리액트 공식 문서도 컴포넌트를 만들 땐 function 문법으로 사용하라고 권장합니다.
어려운 class문법이나 this 키워드를 사용하지않아도 되니
세부 문법을 체크할 필요가 없이 매우 빠르고 쉽게 리액트 웹개발이 가능합니다.

function으로 만드나 class로 만드나 기능적 차이는 거의 없습니다.
useState같은 Hook을 자주 사용할 거라면 function이 훨씬 더 유용한 기능이 많습니다.
다만 class 컴포넌트는 Lifecycle Hook을 조금 더 자세히 쓸 수 있습니다.