React. JSX

React. JSX

⊙ 태그에 class를 부여하고 싶다면?

• class="명칭" → className="명칭"

⊙ 태그에 style를 부여하고 싶다면?

• style="color:blue;" → style={{color : 'blue'}}
• camelCase 적용 필요 (font-size → fontSize)

⊙ 태그에 click Evant를 부여하고 싶다면?

• onclick='fnc();' → onclick={fnc()} or { ()=>{} }

⊙ 데이터 바인딩 편의성

• 데이터를 HTML에 꽂아 놓는 것
• JSX에서는 innerHTML 생략할 수 있다.
• {} 안에 변수/함수 명

import logo from './logo.svg';
let name = '국수집';
function fnc(){
    return '국수집'
}
...
return(
  <h1>{name}</h1>
  <h1>{fnc()}</h1>logo
  <h1>{logo}</h1>
);

⊙ 삼항연산자

...
return(
  {
    1 === 3 
    ? console.log('참') 
    : console.log('거짓')
  }
);

⊙ 반복문

...
return(
  {
    arr.map(function(obj, i){
        return(
            <div>{i}<div/>
        )
    })
  }
);

⊙ 입력폼

...
return(
  <input onChange={ (e)=>{e.target.value} }
);