JSX문법과 일반 함수 return 차이

 

JSX문법에서의 return과 일반 함수에서의 return은 약간 차이가 있다.

 

• JSX 문법에서의 return : JSX는 React 컴포넌트가 화면에 렌더링할 내용을 반환한다. 이 때 괄호 안에 JSX 요소를 반환하는 것은 유효한 문법이다.
• 일반 함수에서의 return : 일반 함수에서는 데이터를 반환할 때 반드시 명시적인 값(배열, 객체, 문자열 등)을 반환해야 하며, 괄호로 묶는다고 해서 여러 값을 자동으로 패키징 하지 않는다.

 

일반 JavaScript 함수 예시

const useCounter = () => {
    const count = 0;
    const increaseCount = () => console.log("Increase");
    const decreaseCount = () => console.log("Decrease");

    // 올바른 반환 형태: 배열이나 객체로 반환해야 함
    return [count, increaseCount, decreaseCount]; // 배열로 반환
};

 

JSX 예시

const MyComponent = () => {
    const count = 0;
    const isFull = false;
    const increaseCount = () => console.log("Increase");
    const decreaseCount = () => console.log("Decrease");

    // JSX 반환 (React 컴포넌트에서 화면에 그릴 요소)
    return (
        <div>
            <p>{`총${count}`}</p>
            <button onClick={increaseCount} disabled={isFull}>+</button>
            <button onClick={decreaseCount}>-</button>
        </div>
    );
};

 

 

정리

• 일반 함수에서의 return은 데이터를 반환해야 하므로, return 뒤에는 배열, 객체, 값이 있어야 한다.
• React컴포넌트에서 JSX를 반환할 때는 렌더링할 내용을 기술 하는 JSX요소를 반환한다.