컴포넌트를 만드는 옛날 문법.

지금은 컴포넌트를 function으로 만들지만

 

예전에는 class로 만들어줬다고한다.

 

class OldCompStyle extends React.Component {

  constructor() {

    super()

  }

  render() {

    return (

      <>

        <p>옛 스타일 컴포넌트 만들기 </p>

      </>

    )

  }

}

 

 

이게 컴포넌트이고

이렇게 부모 컴포넌트에서 써주면 return문 안의 JSX 내용이 남는다.

 

컴포넌트 클래스 안의 내용은 html을 return하는 render함수가 있다는것 외에,

 

React.Component라는 클래스를 extends 하며

 

생성자인 constructor()가있고

 

그 안에 부모 클래스인 React.Component의 constructor()를 호출하는 super()를 가지고 있다.

 

일반 클래스와 크게 다르지않다.

 

 

그러면 이 옛날 방식 컴포넌트 안에서 state 변수는 어떻게 선언할까.

 

이렇게 해준다.

 

생성자 안에 this.state를 선언하고 그 안에 객체 형식으로 state 변수를 만들어준다.

 

 

그 다음 state 변수들의 변경을 한다면?

 

this.setState라는 함수를 사용한다.

 

 

버튼을 클릭하면 실행하는 함수에 this.setState 함수를 호출하고 인자로 바꿀 state의 이름(key값)과 바꿀 값 (value)를 객체 형식으로 넣어준다.

 

중요한점은 state 객체에서 바꿀 프로퍼티만 인자로 넣어주면된다. 

 

그럼 바꾸고자하는 state만 변화시킬 수 있다.

 

 

onClick 안의 로직을 함수로 묶어서 사용하고 싶을때는어떨까.

 

 

이렇게 changeState라는 함수로 class 내에서 선언을 해주고 onClick에는 this.함수명으로 호출할 수 있다.

 

그러나 문제가 생긴다.

 

 

changeState라는 함수는 지금 함수 선언의 일반적인 형태로 선언되었다.

 

공부했다시피

 

function 함수명() {  }; 이렇게 함수를 선언하면 해당 함수 내의 this값이 변화한다.

 

그래서 this.setState의 this는 OldCompStyle이라는 class를 가르키지않는다.

 

 

따라서 해당 오류를 수정하기 위해서는

 

1) 메소드의 선언을 changeState = () => {  } 이렇게 바꿔주거나,

 

2) render 메소드에서 changeState 호출 시 this.changeState.bind(this); 

 

이런 this의 값을 유지시켜주는 작업을 해줘야한다.

 

 

하지만 위의 문제점들은 function 으로 컴포넌트를 만들게되면서 사라진 문제점들이다.

 

 

그렇다고한다.