1. Props란
부모 컴포넌트에서 자식 컴포넌트로 data를 전달할 때 쓰인다.
예를 들어,
App.js(부모) / MyName.js (자식 Component)가 있다고 해보자
App.js
import React, {Component} from 'react';
import MyName from './MyName'
class App extends Component {
render() {
return (
<div>
<MyName name="이름" />
</div>
);
}
}
export default App;
## 작업순서!
1) 자식 컴포넌트를 import 한다. import Myname from '파일위치'
2) name(내려보내고 싶은 key)="입력하고 싶은 값" 을 태그 안에 넣어서 자식 컴포넌트에 보내면 된다.
MyName.js
import React, {Component} from 'react';
class MyName extends Component {
static defaultProps = {
name: '기본이름'
} // this.props.name의 기본값을 설정할 수 있음
render() {
return (
<div>
안녕하세요! 제 이름은 {this.props.name} 입니다.
</div>
)
}
}## 작업 순서
{this.props.name}의 형식으로 사용하면된다
만약에, props 값을 전달받지 않아도 사용할 수 있도록 기본값을 설정하고 싶다면
static defaultProps = { name: '기본이름'} 의 형식으로 사용해도 된다
2. State
state는 객체의 형태로 해당 Component 내에 존재한다. vue의 data와 유사하다
import React, {Component} from 'react';
class Counter extends Component {
state = {
number: 1
}
handleIncrease = () => {
/*this.state.number++;
이렇게 하면 컴포넌트가 이 state가 업데이트 되었는지를 모름 이렇게 쓰면 안됨
*/
this.setState({
number: this.state.number+1
})
}
handleDecrease = () => {
this.setState({
number: this.state.number-1
})
}
render() {
return (
<div>
<h1>카운터</h1>
<div>값 : {this.state.number}</div>
<button onClick={this.handleIncrease}>+</button>
<button onClick={this.handleDecrease}>-</button>
</div>
)
}
}
export default Counter
## 작업 시 주의할 점
1. state 값을 갱신할 때는 반드시, this.setState() 사용
this.setState({
numer: this.state.number++;
}) 처럼 this.setState()내에서 state의 상태를 갱신해주어야 한다
단순히, this.state.number++; 로만 함수 내에서 선언하면 React가 바뀐 값을 rerendering 하지 않는다
2. 이벤트 리스너를 실행할 때는
onClick={this.함수이름} 와 같은 형식을 엘리먼트 내에 선언해준다
3. component내에 함수를 생성할때 화살표 함수를 쓰는 것이 좋다.
물론, 화살표 함수를 쓰지 않아도 되지만
/* 왜 화살표 함수로 작성하냐면, 함수가 this를 인식하지 못함 */
constructor(props) {
super(props);
this.handleIncreate = this.handleIncreate.bind(this);
}
/* 이런 식으로 constructor 함수에서 선언을 해주어야 함
귀찮으니 그냥 화살표 함수를 쓰자
*/constructor(props){}를 인자로 받는 함수를 따로 선언
-> super(props);로 props를 상속
-> this.함수이름=this.함수이름.bind(this);를 선언해주어야 한다.
이렇게 3단계나 거쳐야 하므로, 그냥 화살표 함수를 쓰도록 하자
# 함수형 컴포넌트
컴포넌트를 만들떄 위처럼 Class로 만들수도 있지만, 함수형 컴포넌트를 만들 수도 있다.
import React from 'react';
const MyName = ({name}) => {
return (
<div> 안녕하세요 제 이름은 {name}입니다
</div>
);
};
MyName.defaultProps = {
name: '기본이름'
}
export default Myname함수형 컴포넌트의 장점/특징
- import {Component}를 하지 않아도 된다
- 코드를 더 간결하게 짤 수 있다
- 초기 마운트 속도가 미세하게 더 빠르다
- 메모리도 덜 차지한다.
- 단, state, lifecycle이 없다
### 참고
function sayHello({name, age}) {
console.log(name+age)'
}
// 함수 () 내 {}의 사용과 의미
sayHello({name:'리액트', age:'몰라'})
// 와 같이 사용된다. {}객체 내부의 name, age값을 가져온다
'개발이야기 > react' 카테고리의 다른 글
| JSX 기본 문법 알아보기 (0) | 2020.03.19 |
|---|
![https://ssup2.github.io/images/theory_analysis/MVC_MVP_Pattern/MVC_Pattern_Model1_with_JSP.PNG]](https://ssup2.github.io/images/theory_analysis/MVC_MVP_Pattern/MVC_Pattern_Model1_with_JSP.PNG%5D){kind=link}