11. JSX 사용법

11. JSX 사용법

• 17) JSX 사용법 훑어보기 👉 여기서부터는 따라해봅시다! 🔥 개발자 도구 여는 법! 기억하고 계시죠? 개발자 도구를 열고 에러를 보는 거 잊지 마세요! (F12 혹은 [Cmd +Opt + i ](맥), [Ctrl + Shift + i](윈도우)를 눌러 개발자 도구를 열 수 있어요.) - JSX 규칙 - 1. 태그는 꼭 닫아주기 App.js 파일에서 실습합니다! (오류를 내면서 해보는 거예요!) 하이라이트 된 부분은 지워주세요.  ```jsx // input 태그를 닫지 않고 넣어볼거예요! function App() { return (
  ); } ```  JSX 문법에 맞지 않는다고 에러가 납니다! 아래처럼 /를 추가하고 브라우저를 새로고침 해봅시다. ```jsx ``` - 2. 무조건 1개의 엘리먼트를 반환하기 이번엔 return 아래에 p태그를 하나 추가해볼까요? ```jsx return (

  안녕하세요! 리액트 반입니다 :)

  ); ```  앗! 또 에러가 나네요! 컴포넌트에서 반환할 수 있는 엘리먼트는 1개입니다. 아래와 같이 바꾸고 다시 새로고침 해보세요. ```jsx return (

  안녕하세요! 리액트 반입니다 :)

  ); ``` - 3. JSX에서 javascript 값을 가져오려면? 중괄호를 쓴다! ```jsx const cat_name = 'perl'; // return 부분만 복사해서 붙여넣고 크롬 브라우저로 돌아가 새로고침 해봅시다. return (
  hello {cat_name}!
  ); ``` 👉 값을 가져올 때 뿐만 아니라, map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 {}를 이용할 수 있어요. 해볼까요?😎 ```jsx import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { const number = 1; return (

  안녕하세요! 리액트 반입니다 :)

  {/* JSX 내에서 코드 주석은 이렇게 씁니다 :) */} {/* 삼항 연산자를 사용했어요 */}

  {number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}

  ); } export default App; ``` - 4. class 대신 className! 처음부터 약간 거슬리던 친구가 있지 않나요? ```jsx
  ``` JSX로 작성하는 태그 내에서 클래스 명을 정해줄 땐 속성 값을 className으로 사용합니다. class대신에요! +) 그럼 id도 설마..? 하셨나요? id는 그냥 id로 씁니다. - 5. 인라인으로 style 주기 👉 html 태그에 스타일을 직접 넣던 거 기억하시나요? 거기에서 아주 조금 달라요! css 문법 대신 json 형식으로 넣어주면 끝! HTML ```html

  orange

  ``` JSX ```jsx // 중괄호를 두 번 쓰는 이유? 딕셔너리도 자바스크립트니까요! // 이렇게 쓰거나,

  orange

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

  orange

  ); } ```