[React] ⑤ React.Fragment, this, ref

2021.09.15

56번째 포스팅

 

입사 191일 차.

약 한 달간 3개의 프로젝트에 세 다리를 걸쳤다.기존에 하던 프로젝트 유지보수, 새롭게 참여한 차세대 프로젝트 그리고 주말에만 참여한 하이브리드 앱 프로젝트.블로그도 딱 30일만에 다시 시작해보려고 한다.

 

배운것도 많지만 피부도 상하고 머리카락도 많이 빠졌다.팔자주름도 깊어졌다.이번 주말은 정말 쉬고싶다.

 

오늘은 가볍게 정리만 하려고 한다.

 

 

0. 출처

① ZeroCho님의 무료 인프런강좌 (링크)

② Do it! 리액트 프로그래밍 정석 (eBook)

③ 초보자를 위한 Node.js 200제 (오프라인 구매)

 

 

1. React.Fragment

  ① 기존의 리액트에서는 쓸데없이 부모 <div> 태그를 만들어주어야 제대로 렌더링이 되었다.

  ② 최근에는 <></> 같이 빈 태그를 대신 사용할 수 있다.

  ③ Babel의 버전이 낮거나 빈 태그를 지원하지 않는 경우, <React.Fragment>로 감싸면 빈 태그와 같은 기능을 지원한다.

 

 

2. this

  ① 컴포넌트 내에서 작성하고 호출되는 function이 state를 사용할때는 this의 사용을 조심해야 한다.

  ② 컴포넌트 내에서 호출되는 function을 = function(e) 식으로 호출하는 경우, this가 가리키는 대상이 달라진다.

  ③ 따라서, 컴포넌트 내에서만 호출되는 메소드는 function을 빼고 = (e) => 와 같은 형태로 사용해야 한다.

 

 

3. ref

  ① 컴포넌트 내에서 특정 태그를 지칭할때 사용하는 속성

  ② 일반적인 프론트엔드에서 특정 태그를 지칭할때는 id나 class를 사용한다.

        React에서는 document.querySelector('#id')를 사용해도 되지만, ref 속성을 추가해주면 기존의 id처럼 사용할 수 있다.

  ③ 예시

render() {
    return  (
        <div>
            <div>소수판별하기</div>
            <form onSubmit={ this.chkPrimeNum }>
                <input type="number" ref={(ref01) => { this.input01 = ref01; }} value={this.state.inputTry} onChange={this.inputVal} />
                <button type="submit">확인</button>
            </form>
            <div>
                <span>정답 : {this.state.result}</span>
            </div>
        </div>
    );
};

  ④ input01이라는 변수를 컴포넌트 내에서 사용할 수 있게 되며, 여러가지 JS들을 사용할 수 있게 된다.

 

 

다음포스팅의 주제

[React] ⑥ HooksAPI