JSX

태권·2022년 8월 12일
0

개념알기

목록 보기
3/26

리액트에서는 딱 하나의 html 파일만 존재합니다.

JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 뷰를 그립니다.

HTML을 품은 JS === JSX!

<input type='text'> => <input type='text'/>

태그를 항상 닫아줘야한다 하지만 하나의 태그에 마지막에 /를 쓴다면 닫는효과랑 같다.

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

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

위처럼 하면 에러가난다 이유는 컴포넌트에서 반환할 수있는 엘리먼트는 1개이기 때문이다.
그러기 때문에 div 태그안에 다 넣어주거나
<> ,</> 이 태그 안에 다 넣어주어도 된다.

const cat_name = 'perl';
// 
    return (
      <div>
        hello {cat_name}!
      </div>
    );

js 값을 가져오려면 중괄호를 쓰면된다. 이외에도 map 삼항연산자 등 JS를 쓰려면 중괄호 안에서 쓸수 있다.

<div className="App">

클래스는 class가아니라 className으로 정해준다
id는 id 이다.

<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

css도 중괄호 2번을 해줘야한다.

function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

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

아님 이런식으로 쓴다.

profile
2022.08 개발자 시작

0개의 댓글