JSX에서 함수 호출하기

Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 9번째.

중괄호 안에는 모든 표현식을 넣을 수 있으므로 함수 호출도 가능합니다. 컴포넌트 위에 헬퍼 함수를 정의하고 마크업 내부에서 바로 호출하세요:

function shout(text) {
    return text.toUpperCase() + '!';
}

export default function App() {
    return <h1>{shout('hello')}</h1>;
    // 렌더링: HELLO!
}

이렇게 하면 컴포넌트의 가독성이 유지됩니다. 마크업은 무엇이 표시되는지 나타내고, 헬퍼는 그것이 어떻게 계산되는지 나타냅니다. 문자열 메서드도 직접 동작합니다:

<p>{name.toUpperCase()}</p>

챌린지

쉬움

fullName 헬퍼 함수는 두 부분으로 디스플레이 이름을 생성하지만, 아무도 이를 호출하지 않고 있습니다.

id="author" 속성을 가진 단락이 fullName('Grace', 'Hopper')를 호출한 결과를 렌더링하도록 수정하세요. 결과로 Grace Hopper가 표시되어야 합니다.

직접 해보기

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>