Banner made by Banner Maker
Develop Log
2018.10.19 - 2018.10.28
공부했거나 알게 된 내용을 모아서 정리하는 글을 종종 쓰려고 합니다.
영문 작성 연습을 겸하고 있으니 틀린 표현이나 오타가 있다면 편하게 알려주세요 :)
Prettier
Prettier
Extension (VS Code)Format On Save
"editor.formatOnSave": true
to user setting fileCreate component file as *.jsx
And install extension Simple React Snippets
(VS Code)
Then, we can use Snippet Renders
Snippet Example:
imrc Import React / Component :
import React, { Component } from 'react';
cc Class Component :
class [CLASSNAME] extends Component {
state = { }
render() {
return ( );
}
}
export default [CLASSNAME];
export default [CLASSNAME]
and class [CLASSNAME]
can be integrated as one line:
class [CLASSNAME] extends Component { ... }
export default [CLASSNAME];
=> export default class [CLASSNAME] extends Component { ... }
c.f. Result of code snippet cc
is created seperated shape as a default.
Use <Fragment>
instead of <div>
.
Fragment let you group a list of children without adding extra nodes (ex. div tag)
Then, there is no need to return div
and rendered html element has no <div>
tag also.
Using Fragment Example:
render() {
return (
<React.Fragment>
<h1>Hello world</h1>
<button>Button</button>
</React.Fragment>
);
}
Rendering result :
<!-- not use Fragment -->
<div>
<h1>Hello world</h1>
<button>Button</button>
</div>
<!-- use Fragment -->
<h1>Hello world</h1>
<button>Button</button>
There are two values of boolean. When you check the value, they means respectively like
- falsy : STOP THERE!!
- truthy : CONTINUE!!
In Javascript, string
and number
is truthy (numbers except 0)
true && false; // false
true && "Hi"; // "Hi"
true && "Hi" && 1; // 1
That's why expression in return result is Plain Text "Please create a new tag!"
state = { tags: [] }
render() {
return ({ this.state.tags.length === 0 && "Please create a new tag!"; })
}
this.state
in ReactIn obj.method() : this
is a reference of the object
In function() : this
is a reference of the window
If you want to change the state in method, you would get a message of this
is undefined!
class Counter extends Component {
state = { count : 0}
handleIncrement() {
console.log(this.state); // this is undefined!
}
...
}
First Solution:
Add constructor and bind
method.
With bind
method, we can set value of this.
constructor(){
super();
this.handleIncrement = this.handleIncrement.bind(this);
}
handleIncrement() {
console.log(this);
}
Second Solution :
Use arrow function =>
Arrow function don't rebind this
. Clean and fast!
handleIncrement = () => {
console.log(this);
};
Controlled Component
dosen't have local states.
It receives all the data by a props and raise events whenever data need to be change.
And remove all of this.state.**
from the code
AS-IS
handleIncrement = () => {
this.setState({ value: this.state.value + 1 });
};
// * Inside of render ()
<button onClick={this.handleIncrement} className="...">Inc</button>;
TO-BE
// * Remove handleIncrement()
// handleIncrement = () => {
// this.setState({ value: this.state.value + 1 });
// };
// * Inside of render ()
<button
onClick={() => this.props.onIncrement(this.props.conter)}
className="..."
>Inc</button>
잘봤습니다~ 앞으로도 좋은 글들 기대할게요~