[React] class 문법 (옛날 React 문법)

요즘은 다 function 문법으로 컴포넌트를 생성하기 때문에 몰라도 크게 상관은 없지만

그래도 한번 class 문법을 사용하는 방법을 알아보겠음

(예전 react 프로젝트 코드를 볼 일이 있을 수도 있으니깐)

 

우선 class 문법이 뭔지 매우 쉽게 설명하자면

변수랑 함수를 많이 보관할 수 있는 통이라고 생각하면 됨 (이렇게만 이해하면 됨)

 

그리고 class 안에 3개의 함수를 채워넣고 시작해야함

3개 함수는 constructor, super, render 함수 임

 

 

우리가 컴포넌트를 사용하는 이유가 뭐였냐 하면

긴 html 코드를 깔끔하게 컴포넌트 명 하나로 축약하기 위해서이다.

그렇기 때문에 return 안에 랜더링 할 html을 작성해주면 됨

return 안에 div 만들고 App컴포넌트에서 Modal2를 사용해보자

Modal2 사용

이렇게 class 컴포넌트가 랜더링 된다

 

참고사항으로 React 17 버전부터 JSX를 사용할 때 import React from 'react'를 생략할 수 있지만

class 컴포넌트를 사용할 경우에는 여전히 React를 import해야 에러가 안난다.

(에러 발생해서 당황했음)

class 컴포넌트 사용하려면 상단에 React를 import 해줘야함

 

 

 

이번에는 class 컴포넌트 안에서 state를 만들어 보겠음.

먼저 constructor 안에다가

this.state = {} 해주고 그 안에 만들고 싶은 state를 object 자료형으로 만들어 주면 됨.

이렇게 object 자료형으로 만들어 준다.

 

그리고 사용할 위치에서 {this.state.name} 또는 {this.state.age} 해서 사용하면 됨

랜더링 된 모습

 

 

 

이제 state를 만들었으니 변경하는법도 알아보자

먼저 버튼을 만들고 버튼 클릭시 이름이 변경되도록 해보겠음

this.setState()를 사용한다

 

이름 변경이라는 button을 만들고 this.setState를 사용하여

name과 age를 바꿔주도록 하자.

그리고 버튼을 누르면 state가 잘 변경되어 재랜더링 될 것이다.

잘 바뀌어서 랜더링 된다.

 

 

 

그럼 이번에는 props 문법을 어떻게 사용하는지 알아보자

부모 컴포넌트에서 전송해준 데이터는 어디에 들어있냐면

constructor() 안에 들어있다 -> 소괄호 안에 props라고 작명해주고 사용하면 됨

constructor 소괄호 안에 props라고 작명 후 super 소괄호 안에 props 해서 사용하면 됨

 

 

하지만 class 문법은 귀찮기도 하고 이젠 잘 쓰지 않으니 function 문법 사용하도록 하고

예전 react 프로젝트를 볼 일이 있으면 이 글을 참고하자