라이프 싸이클
클래스형 컴포넌트
함수형 컴포넌트 - 생명주기를 다룰 수 없다
컴포넌트 하나 만들어 준다
import React, { Component } from "react";
// 클래스형 컴포넌트
class Counter extends Component {
state = {
number: 0,
};
// 그림을 그려주는 메서드
render() {
// 이 공간은 2가지의 값을 컨트롤 할 수 있다
const temp1 = this.state;
const temp2 = this.props;
return (
<div>
<h1>카운터</h1>
<div>값: {this.state.number}</div>
</div>
);
}
}
export default Counter;
const가 있는 것과 없는 것의 차이
데이터 1번만 받고 더 이상 새로운 데이터를 받을 필요가 없을 때 (최초 실행 후 읽기전용)
값이 추후 변경 될 가능성이 있을 경우 const를 뺀다
render는 그림을 그려주는 함수 = setState()가 호출되거나, 최초에 객체 생성시 그림 그려줌
render 내부에서는 state와 props에 접근할 수 있음
return 내부는 JSX 문법이 들어감
import React, { Component } from "react";
// 클래스형 컴포넌트
class Counter extends Component {
state = {
number: 0,
};
add = () => {
this.setState({
number: this.state.number + 1,
});
};
minus = () => {
this.setState({
number: this.state.number - 1,
});
};
// 그림을 그려주는 메서드
//render는 그림을 그려주는 함수 = setState()가 호출되거나, 최초에 객체 생성시 그림 그려줌
//render 내부에서는 state와 props에 접근할 수 있음
//return 내부는 JSX 문법이 들어감
render() {
// 이 공간은 2가지의 값을 컨트롤 할 수 있다
// temp1 = this.state;
// temp2 = this.props;
return (
<div>
<h1>카운터</h1>
<div>값: {this.state.number}</div>
<button onClick={this.add}>+</button>
<button onClick={this.minus}>-</button>
</div>
);
}
}
export default Counter;
import React, { Component } from "react";
import Counter from "./Counter";
class App extends Component {
render() {
return (
<div>
<Counter />
</div>
);
}
}
export default App;
----
Counter 에서 state 삭제
import React, { Component } from "react";
// 클래스형 컴포넌트
class Counter extends Component {
add = () => {};
minus = () => {};
// 그림을 그려주는 메서드
//render는 그림을 그려주는 함수 = setState()가 호출되거나, 최초에 객체 생성시 그림 그려줌
//render 내부에서는 state와 props에 접근할 수 있음
//return 내부는 JSX 문법이 들어감
render() {
// 이 공간은 2가지의 값을 컨트롤 할 수 있다
// temp1 = this.state;
// temp2 = this.props;
return (
<div>
<h1>카운터</h1>
<div>값: {this.props.number}</div>
<button onClick={this.add}>+</button>
<button onClick={this.minus}>-</button>
</div>
);
}
}
export default Counter;
App.js 에서 state 추가하고 컴포넌트에 프롭스 넘겨주기
import React, { Component } from "react";
import Counter from "./Counter";
class App extends Component {
state = {
number: 0,
};
render() {
return (
<div>
<Counter number={this.state.number} />
</div>
);
}
}
export default App;
-----------
이렇게 사용 합시다!
App
import React, { Component } from "react";
import Counter from "./Counter";
class App extends Component {
state = {
number: 0,
};
add = () => {
this.setState({
number: this.state.number + 1,
});
};
minus = () => {
this.setState({
number: this.state.number - 1,
});
};
render() {
return (
<div>
<Counter number={this.state.number} add={this.add} minus={this.minus} />
</div>
);
}
}
export default App;
Counter
import React, { Component } from "react";
// 클래스형 컴포넌트
class Counter extends Component {
// 그림을 그려주는 메서드
//render는 그림을 그려주는 함수 = setState()가 호출되거나, 최초에 객체 생성시 그림 그려줌
//render 내부에서는 state와 props에 접근할 수 있음
//return 내부는 JSX 문법이 들어감
render() {
// 이 공간은 2가지의 값을 컨트롤 할 수 있다
// temp1 = this.state;
// temp2 = this.props;
return (
<div>
<h1>카운터</h1>
<div>값: {this.props.number}</div>
<button onClick={this.props.add}>+</button>
<button onClick={this.props.minus}>-</button>
</div>
);
}
}
export default Counter;
----------------
생성자는 최초에 실행될 때만 호출 되고 값 변경시에는 렌더만 실행된다.
값이 바뀔 때마다 실행됨 (바뀔 때마다 props가 날아오기 때문)
-> 함수형컴포넌트에서는 훅스 사용
render 직후 한 번만 호출됨
-------
넘어올 nextProps 와 this.props 를 비교
(아래는 !==일경우 retrun true를 해야한다 주의)
false로 설정하였으니 호출은 되나 값은 변경되지 않는다
------------------
