리액트 Automatic Semicolon Insertion (ASI)현상

let a = ['abc','efef','asefse']

export function Abc(){
    return a.map((val,index)=>{
        return 
        <p key={index}>
            {index}{val}
        </p>
    })
}

 

이렇게 입력하고 출력해보면 p태그가 안찍힘

 

자바스크립트는 성격이 급해서, return 뒤에 아무것도 없이 줄을 바꾸면 "어? 여기서 끝인가 보네?" 하고 자동으로 세미콜론(;)을 찍어버립니다.

return  // 👈 자바스크립트가 여기에 몰래 ; 를 찍어서 (return;)으로 만들어버림
<p key={index}> // 👈 그래서 이 밑에 있는 코드는 영원히 실행되지 않음 (죽은 코드)

이 현상을 Automatic Semicolon Insertion (ASI)라고 부릅니다. 결과적으로 함수가 undefined를 뱉어서 화면에 아무것도 안 나오는 거죠.

 

 

✅ 해결 방법: 괄호 ( )로 감싸주기

리액트에서 여러 줄을 리턴할 때는 반드시 소괄호 ( )로 묶어줘야 "아직 안 끝났어!"라고 자바스크립트에게 알려줄 수 있습니다.

TypeScript

 

// module.tsx

let a = ['abc','efef','asefse']

export function Abc(){
    return a.map((val, index) => {
        // 수정된 부분: return 뒤에 괄호를 엽니다!
        return ( 
            <p key={index}>
                {index} {val}
            </p>
        ) // 여기서 닫아줍니다.
    })
}

export function cdf(){
    console.log('abddc')
}

이렇게 괄호 ( )를 넣어주시면, 아까 의도하신 대로 0abc, 1efef... 이렇게 화면에 잘 뜰 거예요! 바로 수정해 보세요.