1. Class
class는 객체이자 물건을 만드는 설명서이다.
class안에는 함수와 변수를 넣을 수 있다.
이 변수와 함수를 조합해 붕어빵과 몬스터를 만드는 방법을 적어둘 수 있다.
그리고 붕어빵과 몬스터를 만들고 싶다면 new 붕어빵()으로 만들어 준다.
이렇게 만들어진 붕어빵과 몬스터는 객체 또는 인스턴스라고 부른다.
.png)
그림의 new Date()는 함수나 변수를 담은 객체이기 때문에 우리는 이를 호출하기 위해 date.getFullYear()같이 date 객체 내의 getFullYear()를 .으로 구분해 호출한다.
class Date내의 getFullYear()은 함수이지만 앞에 function이 붙어있지 않다.
이렇게 함수이지만 앞에 function이 붙어있지 않은 함수를 method라 한다.
그래서 아래와 같이 정리할 수 있다.
사진 속
new Date()는 내장객체라고하고,
이러한 내장객체로 만들어온const date를 객체 혹은 인스턴스라고 한다.
이러한 방식으로 개발하는 것을객체지향프로그래밍이라한다.
2. Class Component
class라는 개념으로 만든 class component
위에서 언급한 class 방식으로 class component를 만들어 React에서 사용 가능하다.
3. Class Component vs Functional Component
현재 React는 함수형 컴포넌트와 리액트 훅을 함께 사용하는 방식으로 개발할 것을 권장하고 있다.
하지만 과거이 이미 클래스 컴포넌트로 만들어진 프로젝트도 많고 각각의 장단점도 있기에 상황에 맞게 필요한 것을 사용하는 것이 중요하며 그렇기 위해서는 두 방법 모두 잘 다루어야한다.
선언
- 함수형 컴포넌트
export default function App() {
const name = '리액트';
return <div>{name}</div>;
}- 클래스형 컴포넌트
import { Component } from 'react';
export default class App extends Component {
render() {
const name = '리액트';
return <div>{name}</div>;
}
}클래스형 컴포넌트와 함수형 컴포넌트의 역할은 동일하다.
클래스형의 경우 state기능 및 라이프 사이클 기능을 사용할 수 있으며 임의로 메서드를 정의할 수 있다.
또한 render 함수가 꼭 있어야하며, 그 안에서 보여줄 JSX를 반환해야한다.
함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기가 더 편하고, 메모리 자원을 덜 사용한다는 장점이 있다.
과거 함수형 컴포넌트에서는 state와 라이프사이클 API를 사용할 수 없다는 것이 단점이 었는데, 이는 React Hook이 도입되면서 해결되었다.
따라서 요즘은 React Hook과 함수형 컴포넌트를 함께 사용하여 개발하는 추세이고 React측에서도 이를 권장한다.
4. Class Component 사용법
extends Component : Component 기능을 가진 class로 확장한다는 의미이다.
순수한 class에는 state가 없지만 Component로 확장하였기 대문에 내장된 state를 사용할 수 있다.
함수형 컴포넌트에서 return 처럼 사용하는 render라는 기능도
react에서 제공하는 Component에서 데려와 사용할 수 있다.
state 안의 count를 가져다 쓰려면 this.state.count와 같이 사용해야한다.
this는 class 안의 함수 혹은 변수를 선택한다는 것을 의미한다.
같은 방식으로 setState도 component에 내장되어 있기 때문에
this.setState({})과 같은 방식으로 사용한다.
클래스 컴포넌트에서의 this
아래의 클래스 컴포넌트가 정상 작동하지 않는 이유는 무엇일까?
위 코드에서 this에 주목하자.
this는 그때 그때마다 누가 실행을 시켰는지에 따라 다르다.
이 처럼 누가 실행을 시켰느냐에 따라 달라지는 것을 동적 스코프라고 한다.
처음 콘솔에 this를 입력하면 윈도우가 나온다.
aaa라는 객체안에 qqq를 할당하고 qqq안에서의 this는 aaa를 가리킨다.
허나 아래처럼 화살표 함수에서는 동적으로 바뀌지 않는다.
이 처럼 바뀌지 않는 this를 lexical this라고 한다.
자바는 class 기반 언어이고, 자바스크립트는 prototype기반 언어이다.
prototype기반 언어는 난해하기 때문에 javascript를 제외한 대부분은 사라졌지만 javascript는 브라우저에서 사용되기 때문에 아직까지 남아있다.
함수형에서는 동적스코프가 되기 때문에
onClickCounter안의 this와 render내의 this가 다르다.
그래서 아래 코드처럼 onClickCounter를 화살표 함수로 처리하면 두 this는 같은 곳을 가리킨다.
import { Component } from 'react'
export default class CounterPage extends Component {
state = {
count: 99,
}
onClickCounter = () => {
this.setState((prev) => ({
count: prev.count + 1
})
}
render() {
return (
<div>
<div>현재카운트: {this.state.count}</div>
<button onClick={this.onClickCounter}>카운트 올리기!!!</button>
</div>
)
}
}또한 return문 안의 this를 bind처리하면 onClickCounter의 this를 렌더링 할 때의 this로 처리한다.
import { Component } from 'react'
export default class CounterPage extends Component {
state = {
count: 99,
}
onClickCounter () {
this.setState((prev) => ({
count: prev.count + 1
})
}
render() {
return (
<div>
<div>현재카운트: {this.state.count}</div>
<button onClick={this.onClickCounter.bind(this)}>카운트 올리기!!!</button>
</div>
)
}
}