28 Q&A

28번 예제에 대한 질문을 댓글로 남겨주세요.

 

import React, { Component } from 'react';
import { Button, ButtonGroup } from 'reactstrap';

class R038_ReactstrapButtonGroup extends Component {
  constructor (props) {
    super(props);
    this.state = { number: 10 }
  }

  move = (type, e) => {
    if(e != undefined){
      console.log("e.target.value : "+e.target.value)
    }
    if(type === 'Left'){
      this.setState({number: this.state.number - 1})
    }else if(type === 'Right')(
      this.setState({number: this.state.number + 1})
    )
  }

  move2 = (type) => {
    console.log("type : "+type)
  }

  render() {
    return (
      <div style={{padding: "0px"}}>
        <ButtonGroup style={{padding: "0px"}}>
        <Button onClick={e => this.move('Left')}>Left</Button>
          {/* <Button onClick={this.move('Left')}>Left</Button> */}
          {/* this.함수명() 형태로 사용하면 첫 렌더링시 호출 > setState 함수 실행시 > 다시 render실행 > 무한루프 */}
          <Button value={'MiddleValue'} onClick={e => this.move('Middle', e)}>Middle</Button>
          {/* e => this.함수명(파라미터, e) 형태로 사용하면 첫 렌더링시 미호출, 버튼 클릭시 호출, 파라미터와 e 전달 */}
          <Button value={'MiddleValue2'} onClick={this.move2('Middle2')}>Middle2</Button>
          {/* this.함수명(파라미터) 형태로 사용하면 첫 렌더링시 호출, 버튼 클릭시 미호출, 파라미터 전달 */}
          <Button value={'MiddleValue3'} onClick={this.move2()}>Middle3</Button>
          {/* this.함수명() 형태로 사용하면 첫 렌더링시 호출, 버튼 클릭시 미호출, 파라미터 미전달 */}
          <Button value={'MiddleValue4'} onClick={() => this.move2('Middle4')}>Middle4</Button>
          {/* () => this.함수명(파라미터) 형태로 사용하면, 첫 렌더링시 미호출, 버튼 클릭시에만 호출, 파라미터 전달*/}
          <Button onClick={e => this.move('Right')}>Right</Button>
        </ButtonGroup>
        <br/>{this.state.number}
      </div>
      )
  }
}

export default R038_ReactstrapButtonGroup;

 

안녕하세요.

일단 38번 예제에서
R038_ReactstrapButtonGroup.js > 10 line >
move = (type, e) => {
여기서 e는 사용하지 않습니다.
move = (type) => {
이렇게만 사용해도 정상 동작합니다.

제가 습관처럼 e를 함수 선언부에서 불러와서 미쳐 빼지못했네요.
혼란스럽게 해드려서 죄송합니다.

먼저 e는 이벤트의 약자로 쉽게 설명드리면, 함수를 호출한 태그의 모든 정보가 담겨 있다고 보면 됩니다.
이해를 돕기위해 위에 예제 소스를 조금 수정해서 본문에 작성해놨습니다.

개발자도구 console탭을 열고 버튼을 눌러가면서, 출력되는 로그를 확인해주세요

클래스형 컴포넌트인 R038_ReactstrapButtonGroup.js소스가 실행되면
render() { 함수를 실행하고 return함수 안에 작성된 html을 읽어서 화면에 보여주는데요.
onClick이벤트에서 함수를 호출하는 형태에 따라서, 동작이 달라집니다.

이때, onClick이벤트에서
1. onClick={this.함수명()} 형태로 사용하면 html을 읽어서 화면에 보여줄때(첫 렌더링) 함수를 호출합니다.
예) <Button value={'MiddleValue3'} onClick={this.move2()}>Middle3</Button>

2. onClick={this.함수명(파라미터)} 형태로 사용하면, 1번과 동일하게 동작하고 파라미터를 전달합니다.
예) <Button value={'MiddleValue2'} onClick={this.move2('Middle2')}>Middle2</Button>

1,2번은 첫렌더링시 함수를 호출하시만, 정작 필요한 버튼클릭시 동작하지 않습니다.

3. onClick={() => this.함수명(파라미터)} 이 형태로 호출해야, 첫 렌더링시 html 읽을때 호출하지 않고
버튼을 클릭했을 때 함수를 실행합니다.
예) <Button value={'MiddleValue4'} onClick={() => this.move2('Middle4')}>Middle4</Button>

4. 또는 아래와 같은 방식으로 사용해도 3번과 같이 동작하는데요. 이벤트(e)를 사용하지만, 함수 호출시 전달하지는 않습니다.
예) onClick={e => this.함수명(파라미터)}
예) onClick={(e) => this.함수명(파라미터)}
화살표 함수는 괄호를 생략할 수 있어서 위에 2개 소스는 동일한 것이라고 봐도 됩니다.

5. 마지막으로 onClick={(e) => this.함수명(파라미터, e)} 이런식으로 사용하면, 
첫 렌더링시 호출하지않고, 버튼을 클릭했을때만 호출하면서
파라미터와 이벤트를 모두 함수에 전달할 수 있습니다.
예) <Button value={'MiddleValue'} onClick={e => this.move('Middle', e)}>Middle</Button>
여기서 이벤트 e에는 Button태그에 관련한 모든 정보가 담겨 있는데요. 
호출한 move함수에서 전달받은 e로 e.target.value문법을 사용하면, Button태그에 있던 value를 불러올 수 있습니다.
예) console.log("e.target.value : "+e.target.value) // MiddleValue 출력
value이외에도 id, class, name등 호출한 태그에서 사용하는 다른 값들도 불러와 사용할 수 있습니다.

6. <Button onClick={e => this.move('Left')}>Left</Button> 이렇게 사용하면 문제가 없지만
<Button onClick={this.move('Left')}>Left</Button> 이렇게 사용한다면
첫 렌더링때 move함수가 호출되고 this.setState() 함수가 실행됩니다.
this.setState함수는 실행 후 render함수를 호출하는데요
그럼 다시 this.move('Left')가 실행되고 결국 무한루프에 빠지게 됩니다.

추가로 궁금하게 생기면 언제든 댓글 남겨주세요.

감사합니다.