React로 구구단 만들기 #2 //20210325

김지민·2021년 3월 25일
0

TIL

목록 보기
22/28

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함수 내에 또다른 함수 등이 많이 선언되어 있으면 그때마다 새롭게 실행되서 전체 실행 속도가 느려지기 때문..
profile
wishing is not enough, we must do.

0개의 댓글