한입 크기로 잘라 먹는 리액트- jsx

JSX ?

자바 스크립트 문법의 확장 영역이며, 코드가 간결해지고 가독성, 생산성이 높아진다. 

injection attacks(악의적인 공격자가 보안상의 취약점을 이용하여 임의의 SQL문을 주입하고 실행시킴) 를 방어한다. 

 

 

<div>hello {name}</div> //jsx를 사용함, 여는 태그가 있으면 닫는 태그가 있어야 한다.

React.createElement('div', null, `hello, ${name}`); //jsx를 사용안함

 

const MyHeader = () =>{

    return <header>헤더</header>;
};

export default MyHeader;

jsx에서 컴포넌트를 만들려면 무언가 return은 필수이다.

 

<MyHeader/>

app.js에서 컴포넌트를 불러와서 랜더는 필수이다. 

 

{number}는 : {number % 2 === 0? "짝수" : "홀수"} 삼항연산자를 이용한 조건부 랜더링