react로 블로그 생성, 2022-06-09

1. 레이아웃

//App.js

function App(){
  return (
    <div className="App">
      <div className="black-nav">
        <h4>BLOG</h4>
      </div>
    </div>
  )
}

1. html에 class 넣을 땐 className

스타일을 주기 위한 class명을 넣을 때 class=" " 가 아니라 className=" " 이렇게 쓰는 부분이 좀 다른데

왜냐면 실은 App.js에 짜고 있는건 html이 아니라 JSX라고 부르는 이상한 언어라서 그렇습니다.

원래 리액트환경에서

React.createElement('div', null)

이딴 식으로 어렵게 코드짜야합니다.

1. 변수를 html에 꽂아넣을 때는 {중괄호} : 데이터 바인딩

function App(){

  let post = 'GANGNAM';
  return (
    <div className="App">
      <div className="black-nav">
        <div>BLOG</div>
        <div>{ post }</div>
      </div>
    </div>
  )
}
function App(){

  var data = 'red';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
        <div className={data}>안녕하세요</div>
      </div>
    </div>
  )
}

온갖 곳에 {} 중괄호를 열어서 변수들을 집어넣을 수 있습니다.

href, id, className, src 등 여러가지 html 속성들에도 가능합니다.

위처럼 쓰면

1. html에 style속성 넣고싶으면

대쉬기호 대신 모든 단어를 붙여써야합니다. 붙여쓸 땐 앞글자를 대문자로 치환해야합니다. (카멜케이스)

참조 : 코딩애플 리액트 강의 https://codingapple.com/