React 블로그(className, 데이터바인딩, style 넣기)

className

(App.js)

function App(){
  return (
  // class 대신 className 사용
    <div className="App">
      <div className="black-nav">
        <h4>블로그임</h4>
      </div>
    </div>
  )
}

(App.css)

.black-nav {
  background : black;
  width : 100%;
  display : flex;
  color : white;
  padding : 20px;
}

우선 상단의 nav 바를 디자인해봅시다.

위의 코드에서 html 에서 쓰이던 부분과 다른 곳을 볼 수 있습니다.

 

리액트에서는 클래스를 class 대신에 className 으로 사용하고 있습니다.

app.js 에서 짜고 있는 건 html이 아니라 JSX라고 부르는 다른 언어입니다.

그리고 JSX는 일종의 자바스크립트로 class 키워드가 따로 있어, 대신 className이라는 문법을 사용합니다. 

 

 

데이터바인딩

function App(){

  let post = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>블로그임</div>
        // 중괄호로 데이터 바인딩 쉽게 가능
        <div>{ post }</div>
      </div>
    </div>
  )
}

post라는 변수에 '강남 우동 맛집' 이라는 데이터를 저장했습니다.

이 변수를 div 에 꽂아 넣고 싶을 때, 리액트에서는 중괄호{ }를 사용할 수 있습니다.

중괄호는 이외에도 href, id 등 여러가지 html 속성들에도 사용할  수 있으며,

변수에 있던 데이터를 html에 꽂아넣는 작업을 데이터바인딩이라고 합니다.

 

 

style 넣기

html에 style을 넣기 위해서는 <div:style="color:blue"> 같은 방법을 쓰면 됐습니다.

하지만 JSX에서는 style={} 안에 오브젝트{ } 자료형으로 집어넣어야 합니다.

// { } 중괄호 안에 object 자료형으로 스타일 넣기
<div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div>

font 사이즈를 변경할 때는 fonSize 와 같이 대쉬기호 - 를 빼고 사용해야하며, 앞글자들 대문자로 치환해야합니다.

물론, JSX로만 변경해야하는 것은 아니며, css 파일을 열어서 수정해도 됩니다.