react 1일차

react문법의 가장 중요한점

1. class는 className를 써서 적용한다.

2. 리액트에서 데이터 바인딩은 굉장히 쉽다.

JSX에서 데이터바인딩하기

데이터바인딩이라는 전문용어는 별거아니고

자바스크립트 데이터를 HTML에 꽂아넣는 작업을 뜻합니다.

특히 요즘 프론트엔드 웹앱 개발시 데이터바인딩할 작업이 매우 많은데

리액트는 이걸 매우 쉽게 구현할 수 있습니다.

function App(){

  var data = '안녕하세요';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
        <div>여기에 꽂고 싶으면?</div>
      </div>
    </div>
  )
}

위의 예제를 보시면 data라는 변수를 하나 만들었습니다. (함수 안에 변수만드는건 자유입니다.)

근데 이 data라는 변수를 <div>안에 꽂아 보여주고 싶습니다.

이걸 어떻게 할까요?

옛날 자바스크립트 문법을 쓴다면 document.getElementById().innerHTML = ?? 이런 식이었겠죠.

근데 리액트는 더 쉽게 데이터를 꽂아넣을 수 있습니다.

  
function App(){

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

중괄호안에 데이터바인딩하고 싶은 변수명만 담으시면 됩니다.

그럼 실제 미리보기 해보셨을 때 <div>안녕하세요</div>가 출력됩니다.

변수명 뿐만 아니라 미리 만들어둔 함수명이든 뭐든 별걸 다 집어넣을 수 있습니다.

그리고 href, id, className, src 등 여러가지 HTML 속성들에도 데이터바인딩이 가능합니다.

function App(){

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

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

위의 예제는 <div className=”nav”>안녕하세요</div> 라고 데이터바인딩하는 중입니다.

3. JSX 에서 style 속성 집어넣을때

HTML에 스타일을 직접 넣고 싶으면

style=”color : blue”이런걸 넣고 싶으면 어떻게 하는지 알려드리겠습니다.

JSX 상에서는 무조건 {} 오브젝트로 바꿔서 넣으셔야합니다.

<div style={ 스타일용 오브젝트 }> 글씨 </div>
이렇게 하셔야합니다. (중괄호 있는거 유의하세요)

스타일용 오브젝트 자료형은 어떻게 만드냐면

<div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div>
이렇게 하셔야합니다.

– { 속성명 : ‘속성값’ } 이렇게 넣으시면 됩니다.

– 근데 속성명에 – (대쉬)기호를 쓸 수 없습니다. 대쉬기호 대신 모든 단어를 붙여써야합니다. 붙여쓸 땐 앞글자를 대문자로 치환해야합니다. (카멜케이스적용)

세상에 style 넣으려면 저런 짓을 해야한다니.. 복잡해보이고 보기싫죠?

그러니 이걸 변수로 따로 저장해놓고 style={변수명} 이렇게 넣으시거나

아니면 그냥 얌전히 CSS파일에 class를 만들어 사용하도록 합시다.