[React] JavaScript 함수 생성 및 JSX 적용

[해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다.
따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.]

Class 내부에 보면 render() { ... }가 존재했던 것을 알 수 있었다. 자세히 보면 함수인 것을 알 수 있다. 따라서 우리도 함수를 만들어서 사용할 수 있다는 것을 알 수 있다. 이번엔 React에 JavaScript 함수를 생성하여 이용해보자.

JavaScript 함수 생성 포스팅에서 사용했던 3가지 방법이 있었다. 여기서 2가지는 먹히지만 1개는 적용이 안된다. 다음의 코드를 보자.

 

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    //함수 생성 1 (사용 불가)
    function f1(){
      console.log('function1 Call.');
      
    }
    //함수 생성 2
    f2 = function(){
      console.log('function2 Call.');
      
    }
    //함수 생성 3
    f3 = () => {
      console.log('function3 Call.');
    }

  render() {
    return (
      <div>

      </div>
    );
  }
}

export default App;

 

React에서 function f1은 사용이 불가능하다. 따라서 다음과 같이 변경해야 한다.

 

//함수 생성 1
f1(){
  console.log('function1 Call.');
      
}

 

함수를 이용하여 버튼 기능 구현하기

이번엔 JSX에서 버튼 태그를 생성하여 함수를 호출할 수 있도록 해보자.

다음과 같이 버튼 태그를 만들어 화면에 생성시켜보자.

 

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    //함수 생성 1
    f1(){
      console.log('function1 Call.');
      
    }
    //함수 생성 2
    f2 = function(){
      console.log('function2 Call.');
      
    }
    //함수 생성 3
    f3 = () => {
      console.log('function3 Call.');
    }

  render() {
    return (
      <div>
        <button>버튼1</button>
        <button>버튼2</button>
        <button>버튼2</button>
      </div>
    );
  }
}

export default App;

 

이제 위에서 선언한 함수를 button 태그에 적용해보자. button 태그엔 이벤트를 발생시킬 수 있는 onclick 속성이 존재한다.

onclick = {함수명}

 

!주의 중요한 것은 함수를 호출해선 안 된다! 함수명만을 가져와야 이벤트를 줬을 때 해당 함수로 이동하여 작동하기 때문이다.

!주의 함수명은 단독으로 사용해선 안 된다. this키워드를 통해 해당 Class 것을 명시해야 한다.

 

다음과 같이 3개의 버튼에 각각 함수 1, 2, 3을 적용시켜보자.

 

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    //함수 생성 1
    f1(){
      console.log('function1 Call.');
      
    }
    //함수 생성 2
    f2 = function(){
      console.log('function2 Call.');
      
    }
    //함수 생성 3
    f3 = () => {
      console.log('function3 Call.');
    }

  render() {
    return (
      <div>
        <button onClick = {this.f1}>버튼1</button>
        <button onClick = {this.f2}>버튼2</button>
        <button onClick = {this.f3}>버튼2</button>
      </div>
    );
  }
}

export default App;

 

화면에 버튼 3개가 나온 것을 볼 수 있다. 버튼은 console.log()를 호출하므로 웹에선 아무런 반응이 없을 것이다. 동작이 정상적으로 되는지 확인하기 위해, 웹에서 우측 클릭하여 검사로 들어가 console 탭으로 들어가자.