기본 구조 이해하기
1
2
3
4
5
6
7
8
9
10
11
12
13
// src/index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
reportWebVitals();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*src/App.css*/
.container {
padding: 10px;
}
.container h1 {
font-size: 25px;
font-weight: normal;
}
.container h2 {
margin-top: 16px;
font-size: 16px;
font-weight: normal;
}
.container p {
margin-top: 16px;
font-weight: normal;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// src/App.js
import React, { Component } from "react";
// Component를 import 함으로서 App extends React.Component 대신 App extends Component 이렇게 써도 된다.
import "./App.css";
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="container">
<h1>React Example</h1>
<p>HTML 적용하기</p>
</div>
);
}
}
export default App;
React 컴포넌트 이해하기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// src/App.js
import React, { Component } from "react";
import ImportComponent from "./ImportComponent";
import "./App.css";
class App extends Component {
render() {
return (
<div className="container">
<h1>React Example</h1>
<ImportComponent />
</div>
);
}
}
export default App;
1
2
3
4
5
6
7
8
9
10
11
// src/ImportComponent.js
import React, { Component } from "react";
class ImportComponent extends Component {
render() {
return <h2>This is Imported Component</h2>;
}
}
export default ImportComponent;
생명주기 함수 이해하기
1단계:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// src/App.js
import React, { Component } from "react";
import LifeCycle from "./LifeCycle";
import "./App.css";
class App extends Component {
render() {
return (
<div className="container">
<h1>React Example</h1>
<LifeCycle />
</div>
);
}
}
export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
// src/LifeCycle.js
import React, { Component } from "react";
class LifeCycle extends Component {
render() {
console.log("3.render()");
return <h2>This is Render Function</h2>;
}
}
export default LifeCycle;
2단계:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// src/LifeCycle.js
import React, { Component } from "react";
class LifeCycle extends Component {
constructor(props) {
super(props);
console.log("1. constructor()");
}
render() {
console.log("3. render()");
return <h2>This is Render Function.</h2>;
}
}
export default LifeCycle;
3단계:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// src/App.js
import React, { Component } from "react";
import LifeCycle from "./LifeCycle";
import "./App.css";
class App extends Component {
render() {
return (
<div className="container">
<h1>React Example</h1>
<LifeCycle propValue="fromApp" />
</div>
);
}
}
export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// src/LifeCycle.js
import React, { Component } from 'react';
class LifeCycle extends Component {
constructor(props){
super(props);
this.state = {};
console.log("1. constructor()");
console.log(props);
}
static getDerivedStateFromProps(props, state){
console.log("2. getDerivedStateFromProps(), " + props.propValue);
console.log(props);
console.log(state);
return ();
}
render(){
console.log("3.render()");
return(
<h2>This is Render Function.</h2>
);
}
}
export default LifeCycle;
4단계:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// src/LifeCycle.js
import React, { Component } from 'react';
class LifeCycle extends Component {
constructor(props){
super(props);
this.state = {};
console.log("1. constructor()");
console.log(props);
}
static getDerivedStateFromProps(props, state){
console.log("2. getDerivedStateFromProps(), " + props.propValue);
return (
{tempState: props.propValue};
);
}
componentDidMount(){
console.log("4. componentDidMount()");
console.log("5. tempState : " + this.state.tempState);
console.log(this.state);
}
render(){
console.log("3. render()");
return(
<h2>This is Render Function.</h2>
);
}
}
export default LifeCycle;
5단계:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// src/LifeCycle.js
import React, { Component } from "react";
class LifeCycle extends Component {
constructor(props) {
super(props);
this.state = {};
console.log("1. constructor()");
console.log(props);
}
static getDerivedFromProps(props, state) {
console.log("2. getDerivedStateFromProps(). " + props.propsValue);
return { tempState1: props.propsValue };
}
componentDidMount() {
console.log("4. componentDidMount()");
console.log("5. tempState1 : " + this.state.tempState1);
this.setState({ tempState2: true });
}
shouldComponentUpdate(props, state) {
console.log("6. shouldComponentUpdate(), tempState : " + state.tempState2);
return state.tempState2;
}
render() {
console.log("3. render()");
return <h2>This is Render Function</h2>;
}
}
export default LifeCycle;