10000 first commit · byreact/react-lifecycle@5340b5c · GitHub
[go: up one dir, main page]
Skip to content

Commit 5340b5c

Browse files
ljlm0402ljlm0402
committed
first commit
1 parent 49cf673 commit 5340b5c

File tree

10 files changed

+197
-105
lines changed

10 files changed

+197
-105
lines changed

‎README.md

Lines changed: 100 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,126 @@
1-
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
1+
# React LifeCycle API
22

3-
## Available Scripts
3+
![](./lifecycle.png)
44

5-
In the project directory, you can run:
5+
<br />
6+
<hr />
67

7-
### `yarn start`
8+
### constructor
9+
```js
10+
constructor(props) {
11+
super(props);
12+
console.log('constructor');
13+
}
14+
```
815

9-
Runs the app in the development mode.<br />
10-
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
16+
<br />
1117

12-
The page will reload if you make edits.<br />
13-
You will also see any lint errors in the console.
18+
* 컴포넌트가 새로 만들어질때 생성
1419

15-
### `yarn test`
20+
<br />
21+
<hr />
1622

17-
Launches the test runner in the interactive watch mode.<br />
18-
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
23+
### getDerivedStateFromProps
24+
```js
25+
static getDerivedStateFromProps(nextProps, prevState) {
26+
if(prevState.value !== nextProps.value) {
27+
return { value: nextProps.value };
28+
}
29+
return null;
30+
}
31+
```
1932

20-
### `yarn build`
33+
<br />
2134

22-
Builds the app for production to the `build` folder.<br />
23-
It correctly bundles React in production mode and optimizes the build for the best performance.
35+
* 현재 값과 다음 값을 비교하여 같은면 null 아니면 다음으로 받아올 값으로 변경한다.
36+
* props 값을 state 와 동기화 시킬때
37+
* nextProps : 다음으로 받아올 프롭스 값
38+
* prevState : 현재 업데이트 되기전의 상태를 가져온다
2439

25-
The build is minified and the filenames include the hashes.<br />
26-
Your app is ready to be deployed!
40+
<br />
41+
<hr />
2742

28-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
43+
### shouldComponentUpdate
44+
```js
45+
shouldComponentUpdate(nextProps, nextState) {
46+
if(nextProps.value === 10) return false;
47+
return true;
48+
}
49+
```
2950

30-
### `yarn eject`
51+
<br />
3152

32-
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
53+
* 컴포넌트가 업데이트를 할지 말지 정해주고
54+
* false 일경우는 렌더링을 안하고
55+
* true 일경우 렌더링을 한다.
3356

34-
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
57+
<br />
58+
<hr />
3559

36-
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
60+
### getSnapshotBeforeUpdate
61+
```js
62+
getSnapshotBeforeUpdate(prevProps, prevState) {
63+
console.log('getSnapshotBeforeUpdate')
64+
}
65+
```
3766

38-
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
67+
<br />
3968

40-
## Learn More
69+
* DOM 변화하기 직전의 상태를 가져오며
70+
* 여기서 리턴하는 값은 `componentDidUpdate`에 3번째 파라미터로 받아올수있다.
71+
* 대게 `prevProps`와 `this.sate`값을 비교하여 이벤트를 발생시킨다.
4172

42-
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
73+
<br />
74+
<hr />
4375

44-
To learn React, check out the [React documentation](https://reactjs.org/).
76+
### componentDidUpdate
77+
```js
78+
componentDidUpdate(prevProps, prevState, snapshot) {
79+
if(this.props.value !== prevProps.value) {
80+
console.log('componentDidUpdate', this.props.value);
81+
}
82+
}
83+
```
4584

46-
### Code Splitting
85+
<br />
4786

48-
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
87+
* render()를 호출하고난 다음에 발생한다.
4988

50-
### Analyzing the Bundle Size
89+
<br />
90+
<hr />
5191

52-
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
92+
### componentWillUnmount
93+
```js
94+
componentWillUnmount() {
95+
console.log('componentWillUnmount')
96+
}
97+
```
5398

54-
### Making a Progressive Web App
99+
<br />
55100

56-
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
101+
* 컴포넌트가 더 이상 필요하지않을시 사용
102+
* 이벤트, setTimeout, 외부 라이브러리 인스턴스 제거
103+
104+
<br />
105+
<hr />
106+
107+
### componentDidCatch
108+
```js
109+
componentDidCatch(error, info) {
110+
this.setState({ error: true });
111+
112+
// API를 통해서 서버로 오류 내용 날리기
113+
console.log(error);
114+
console.log(info);
115+
}
116+
```
57117

58-
### Advanced Configuration
59-
60-
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
61-
62-
### Deployment
63-
64-
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
65-
66-
### `yarn build` fails to minify
67-
68-
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
118+
<br />
119+
120+
* 컴포넌트 자신의 render 함수에서 에러가 발생해버리는것은 잡아낼 수는 없지만,
121+
* 그 대신에 컴포넌트의 자식 컴포넌트 내부에서 발생하는 에러들을 잡아낼 수 있습니다.
122+
* 그러므로 에러가 발생하는 컴포넌트가 아닌 부모 컴포넌트에서 실행
123+
* 실수로 잡지 못했던 잡기위해 에러는 트레킹으로 넘기고 클라이언트에서는 메세지를 출력한다.
124+
125+
> 출처
126+
> [LifeCycle API](https://react-anyone.vlpt.us/05.html)

‎lifecycle.png

199 KB
Loading

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
{
2-
"name": "velopert-example",
2+
"name": "react-lifecycle-example",
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"prop-types": "^15.7.2",
67
"react": "^16.12.0",
78
"react-dom": "^16.12.0",
89
"react-scripts": "3.2.0"

‎src/App.css

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎src/App.js

Lines changed: 46 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,48 @@
1-
import React from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
4-
5-
function App() {
6-
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.js</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
22-
</div>
23-
);
24-
}
1+
import React, { Component } from 'react';
2+
import MyCompnent from './MyComponent';
3+
4+
class App extends Component {
5+
6+
state = {
7+
counter: 1,
8+
error: false
9+
};
10+
11+
// 컴포넌트가 새로 만들어질때 호출
12+
constructor(props) {
13+
super(props);
14+
console.log('constructor');
15+
}
16+
17+
componentDidMount() {
18+
console.log('componentDidMount')
19+
}
20+
21+
componentDidCatch(error, info) {
22+
this.setState({ error: true });
23+
24+
console.log(error);
25+
console.log(info);
26+
}
27+
28+
handleClick = () => {
29+
this.setState({ counter: this.state.counter + 1 });
30+
}
31+
32+
render() {
33+
if (this.state.error) {
34+
return (
35+
<div>에러가 발생하였습니다.</div>
36+
)
37+
}
38+
39+
return (
40+
<div>
41+
{this.state.counter !== 10 && <MyCompnent value={this.state.counter} />}
42+
<button onClick={this.handleClick} >Click Me</button>
43+
</div>
44+
);
45+
};
46+
};
2547

2648
export default App;

‎src/App.test.js

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎src/MyComponent.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, { Component } from 'react'
2+
3+
class MyComponent extends Component {
4+
state = {
5+
value: 0
6+
};
7+
8+
static getDerivedStateFromProps(nextProps, prevState) {
9+
if(prevState.value !== nextProps.value) {
10+
return { value: nextProps.value };
11+
}
12+
return null;
13+
}
14+
15+
shouldComponentUpdate(nextProps, nextState) {
16+
console.log('shouldComponentUpdate')
17+
console.log('nextProps', nextProps);
18+
console.log('nextState', nextState);
19+
20+
if(nextProps.value === 10) return false;
21+
return true;
22+
}
23+
24+
getSnapshotBeforeUpdate(prevProps, prevState) {
25+
}
26+
27+
componentDidUpdate(prevProps, prevState, snapshot) {
28+
if(this.props.value !== prevProps.value) {
29+
console.log('componentDidUpdate', this.props.value);
30+
}
31+
}
32+
33+
componentWillUnmount() {
34+
console.log('componentWillUnmount')
35+
}
36+
37+
render() {
38+
return (
39+
<div>
40+
<p>props: {this.props.value}</p>
41+
<p>state: {this.state.value}</p>
42+
</div>
43+
)
44+
}
45+
}
46+
47+
export default MyComponent;

‎src/index.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,4 @@ import App from './App';
55
import * as serviceWorker from './serviceWorker';
66

77
ReactDOM.render(<App />, document.getElementById('root'));
8-
9-
// If you want your app to work offline and load faster, you can change
10-
// unregister() to register() below. Note this comes with some pitfalls.
11-
// Learn more about service workers: https://bit.ly/CRA-PWA
128
serviceWorker.unregister();

‎src/logo.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎yarn.lock

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7997,7 +7997,7 @@ react-dev-utils@^9.1.0:
79977997
strip-ansi "5.2.0"
79987998
text-table "0.2.0"
79997999

8000-
react-dom@16.12.0:
8000+
react-dom@^16.12.0:
80018001
version "16.12.0"
80028002
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
80038003
integrity sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw==
@@ -8078,7 +8078,7 @@ react-scripts@3.2.0:
80788078
optionalDependencies:
80798079
fsevents "2.0.7"
80808080

8081-
react@16.12.0:
8081+
react@^16.12.0:
80828082
version "16.12.0"
80838083
resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
80848084
integrity sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJ 37BC gzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==

0 commit comments

Comments
 (0)
0