ch04.JSX 문법(3)

6) 인라인 스타일링

• DOM 요소에 스타일을 적용할 때에는 문자열 형태가 아니라 객체 형태로 넣어야 한다.
• 만약 스타일 이름 중 background-color처럼 '-'가 포함될 경우 카멜 표기법으로 작성
• 바로 스타일을 지정하고 싶다면 style={{스타일1 : 스타일 값 1, 스타일 2 : 스타일 값 2}} 방식으로 작성한다.

function App() {  
    const name = '리액트';
    /*
      const style = {//background-color는 카멜 표기법으로 표기
        backgroundColor : 'black',
        color : 'aqua',
        fontSize: '48px',//font-Size
        fontWeight : 'bold',//font-weight
        padding : 16 //단위를 생략 하면 px
      };
      return (
        <div style={style}>{name}</div>
      );
    */
    return (
      <div style={{//미리 선언하지 않고 style 지정
        backgroundColor : 'black',
        color : 'aqua',
        fontSize: '48px',//font-Size
        fontWeight : 'bold',//font-weight
        padding : 16 //단위를 생략 하면 px
      }}>{name}</div>
    );
  }
  export default App;

7) class 대신 className

• 일반적인 HTML에서 class 속성을 className으로 설정해 주어야 한다.
• class로 설정하여도 동작하긴 하지만 console탭에 경고가 나타난다.

App.css

.react {
  background: aqua;
  color: black;
  font-size: 48px;
  font-weight: bold;
  padding: 16px;
}

App.js

import './App.css';//css import
function App() {  
    const name = '리액트';
    return (//클래스로 해도 동작은 하지만 console창 경고가 뜬다.
      <div className = 'react'>{name}</div>
    );
  }
  export default App;

실행 결과

8) 꼭 닫아야 하는 태그

• 리액트에서는 태그를 닫지 않을 경우 오류가 난다.
• 만약 태그 사이에 별도의 내용이 들어가지 않을 경우에는 self-closing 태그를 사용한다. (<input />)

function App() {  
    const name = '리액트'
    return (
      /*
      <>
        <div className='react'>{name}
         <input>//리액트에선 꼭 닫지 않아도 되는 태그 사용시 오류
        </div>
      </>
      */
      //self-closing 을 하거 나 닫아주어야 오류가 없다.
      <>
        <div className='react'>{name}
          <input></input>
          <input />
        </div>
      </>
      
    );
  }
  export default App;

오류 

오류

9) 주석

• JSX 내부에서 주석을 작성할 경우엥=는 {/* */} 형식으로 작성한다.
• 시작 태그를 여러 줄로 작성할 경우에는 내부에서 // 형식으로 작성이 가능하다.
• 일반 자바스크립틑 처럼 주석을 작성하면 페이지에 고스란히 나타난다.

function App() {  
    const name = '리액트';
    return (
      <>
        {/* 주석 */}
        <div
          className='react' //시작태그를 여러줄로 할시 여기에 주석 가능
        >
          {name}
        </div>
        //단, 이런 주석이나 
        /* 이런 주석은 페이지에 그대로 나타난다. */
        <input />
      </>
    );
  }
  export default App;

실행 결과