1-8. Fragment와 기타 팁들
1) Fragment
- 원래 render 함수 내에서 return 내 최상위에 아무 의미 없는 div태그로 감싸줘야 함.
render () {
return (
<div> //이부분
<div>{this.state.first} 곱하기 {this.state.second}는?</div>
<form onSubmit={this.onSubmit}>
<input ref={this.onRefInput} type="number" value={this.state.value} onChange={this.onChange}/>
<button>입력</button>
</form>
<div>{this.state.result}</div>
</div>
);
}
- 이 div는 element상으로 의미없는 div가 생기는 건데 이러면 css적용 등에서 문제가 될 수 있음.
- div 태그를 React.Fragment로 바꿔주면 문서구조에서 div가 안뜨고 실제로 없다.
2) 소괄호 ()
- 아무 의미없다. 여러개 써도 무관.
- 그냥 수학에서 쓰는 것처럼 우선순위 주는 데에 사용가능 ex) 5*(2+3)=25
3) 화살표 함수
- JSX와 JS를 혼용하지 않기 위해 따로 빼서 직접 만든 함수의 경우 반드시 화살표함수로 작성해야 함.
- 함수 내의 this값이 달라지기 때문.
//ex
onSubmit = (e) => { //이런 식으로 화살표 함수로 작성해야 함.
4) constructor, super(props), this.state
- class 선언 시에 constructor를 썼었는데 안써도 무관(실무에서는 안쓰는 경우가 더 많다고 함)
- state 초기값 선언 시의 this도 따로 빼도 됨.
//ex
class GuGuDan extends React.Component {
state = { ...} //이렇게 바로 state값 선언 가능
1-9. 함수형 setState
- 기존 setState는 객체형으로만 사용 했음.
this.setState = { key : value } //이런 형태
- 근데 기존 상태값을 같이 사용해야 하는 경우가 있음. 예를 들면 Counter
- 이럴때는 함수형으로 setState를 사용해야 하는데, 간단하게 구분하면
- this.setState 내에 this.state.key 가 들어갈 경우 함수형을 사용함.
- 함수형 setState는 기존 상태값을 prevState라는 파라미터 형태로 받아오기 때문에 현재 상태값과 미래의 상태값을 혼동하지 않게 해줌.
//example
this.setState ((prevState) => {
return {
result : prevState.value + ' 정답',
first : Math.ceil(Math.random() * 9),
second : Math.ceil(Math.random() * 9),
value: '',
}
});
1-10. ref
- React를 쓰면서 document객체와 그 메소드들은 안쓰는게 좋다.
- 왜냐면 React가 화면을 컨트롤하기 때문에 개발자는 데이터만 편집하면 됨!!!!!!
- 그래도 DOM에 직접 접근하고 싶다면 ref 사용
//example
onRefInput = (e) => {
this.input = e;
} //적용할 함수를 선언하고
<input ref={this.onRefInput} type="number" value={this.state.value} onChange={this.onChange}/> //여기 ref에서 참조(reference)함.
1-11. 추가 팁
- render함수 내에 많은 로직은 선언하지 않는게 좋다.
- render 상단에 console.log('렌더링')을 해보면 알겠지만 setState 등으로 상태값이 변화할때마다 render함수가 실행되는데, render함수 내에 또다른 함수 등이 많이 선언되어 있으면 그때마다 새롭게 실행되서 전체 실행 속도가 느려지기 때문..