리액트 기초- JSX 사용법

cd week-1 # week-1 폴더로 이동합니다.
yarn start

JSX

JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그린다.
HTML을 품은 JS === JSX!

JSX에서 쓰는

는 DOM 요소가 아니고 React 요소이다.

JSX 사용법

1. 태그는 꼭 닫아주기

<input type='text'>  // 태그를 닫아주지 않아서 오류!
<input type='text'/> // 꼭 닫아주기!
  

2. 무조건 1개의 엘리먼트를 반환하기
   return할 수 있는 element가 하나이다.

return하는 요소가 여러가지인 경우 오류발생

return (
    <p>안녕하세요! 리액트 반입니다 :)</p>

    <div className="App">
      <input type='text'/>
    </div>
  );

div안에 넣어 하나의 element로 만들어주기!

return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      <input type='text'/>
    </div>
  );

3. JSX에서 javascript 값을 가져오려면?
   중괄호를 쓴다! 값을 가져올 때 뿐만 아니라, map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 {}를 이용할 수 있다.

	const cat_name = 'perl';
// return 부분만 복사해서 붙여넣고 크롬 브라우저로 돌아가 새로고침 해봅시다.
    return (
      <div>
        hello {cat_name}!
      </div>
    );

4. class 대신 className!
   id는 그냥 id로 쓴다.

5. 인라인으로 style 주기
   css 문법 대신 json 형식으로 넣어주면 끝! (그냥 스트링으로는 안되고 딕셔너리 형태로 만들어 줘야한다는 것)

// 중괄호를 두 번 쓰는 이유? 딕셔너리도 자바스크립트니까요!
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있어요!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}