JSX 문법

안정민·2021년 8월 31일
0
  1. JSX에서 class를 지정할때 className으로 지정한다.
  2. 데이터 바인딩을 할때 {변수명}으로 바인딩 해준다.
  3. 함수를 {함수명()} 이런식으로 바인딩 하는것도 가능하다.
  4. 이미지를 넣을 때 바로 경로를 지정해줘도 되지만 보통 상단에 import를 한 다음 import한 변수명을 {변수명}으로 지정해준다.
  5. style 같은것을 지정해줄 때는 Object형식으로 넣어준다. 그 이유는 style에 들어가는 기호들이 자바스크립트에 영향을 줄 수 있기 때문에 style에 직접적으로 지정을 해주면 오류가 난다.
      <div style = { { color : 'blue' } }></div></div>
  6. style에서 Object형식으로 지정해준다고 해도 - 기호가 들어간것은 그대로 지정을 해주면 안된다. 그래서 카멜네이밍 룰을 따라서 지정해준다.
      <div style = { { fontSize : 'blue' } }></div></div>
function App() {
  let posts = {color : 'blue' , fontSize : '30px'};
  return (
    <div className="App">
      <div className="black-nav">
        개발 Blog
      </div>
      <div style ={ posts }></div>
    </div>
  );
}

이런식으로 지정도 가능하다.

profile
안정민

0개의 댓글