인프런 커뮤니티 질문&답변

phw3052님 안녕하세요.

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

const user = {
    firstName: 'Inje',
    lastName: 'Lee'
};

const element = (
    <h1>
        Hello, {formatUser(user)}
    </h1>
);

ReactDOM.render(
    element,
    document.getElementById('root')
);

 

위 코드를 보시면 먼저 formatName()이라는 함수를 선언하였고,

다음으로 user라는 JavaScript 객체를 선언하였습니다.

그리고 user객체에는 firstName과 lastName이 값으로 들어가 있는 것을 볼 수 있죠.

formatName()함수는 user객체를 파라미터로 받아서 이름을 출력해주는 함수입니다.

그러면 이름을 얻기 위해서는 formatName()함수에 user객체를 넣어서 호출해야 합니다.

그런데 여기에서 원하는 것은 h1이라는 HTML 태그 안에 Hello라는 인삿말과 함께 이름이 출력되는 것입니다.

이름을 얻기 위해서는 formatName()함수에 user객체를 파라미터로 넣어서 호출해서 하는데,

JSX를 사용해서 HTML코드 사이에 중괄호 써서 함수를 호출하는 코드를 넣어준 것입니다.

JSX에서는 중괄호를 사용하고 그 안에 JavaScript 코드를 넣으면 된다는 사실을 기억하세요.

 

만약 함수 호출을 밖에서 하는 형태로 구현하고 싶다면 아래와 같이 할 수 있습니다.

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

const user = {
    firstName: 'Inje',
    lastName: 'Lee'
};

// 여기서 myName은 'Inje Lee'가 됩니다.
const myName = formatUser(user);

const element = (
    <h1>
        Hello, {myName}
    </h1>
);

ReactDOM.render(
    element,
    document.getElementById('root')
);