JSX에서 직접 작성한 메서드의 반환 값을 출력하려면 변수를 출력할 때와 마찬가지로 {}를 사용한다. 다음 예제 코드 3.6을 살펴보자(ch03/method/jsx/scrch03/meipt.jsx). 이 경우에는 render에서 getUrl() 메서드를 호출하고, getUrl() 메서드의 반환 값을 뷰에 보여준다. 이때 ()를 사용하여 메서드를 호출해야 한다는 점을 기억하자.

 

예제 코드 3.6 컴포넌트 메서드를 호출하여 URL 가져오기

class Content extends React.Component {
    getUrl() {
        return 'http://webapplog.com'
    }
    render() {
        return (
            <div>
                <p>Your REST API URL is: <a href={this.getUrl()}>{this.getUrl()}</a></p> ---- 중괄호 안에서 클래스 메서드를 호출한다.
            </div>
        )
    }
}
...

---

 

한 번 더 정리하면 JSX의 {}에서 컴포넌트 메서드를 직접 호출할 수 있다. 예를 들어 헬퍼 메서드 getUrl을 {this.getUrl()}로 호출했다. 예제 코드 3.6에서 메서드를 사용하면 <p> 태그의 링크에 이 메서드의 반환값인 http://webapplog.com이 표시된다(그림 3-2 참조).