2장 JSX

• 자바스크립트 식 표현 , fragment
• fragment - div 대신 감싸주는 코드

import React from "react";
//import React, {Fragment} from "react";

// 리액트에서는 여러개의 요소를 하나의 요소로 감싸지 않으면 오류 생긴다
function App() {
  const name = "할로"; //const는 ES6의 문법, 상수 선언할 때 사용
  return(
  // Fragment는 생략도 가능하다.
  <>    
  <h1>{name}  안녕?</h1>
  <h2>잘 작동하니?</h2>
  </>
  );

}

export default App;

if 문 대신 조건부 연산자

• 리액트에서 if문 쓰는 법.

function App() {
  const name = "액트" // 상수 선언
  return (
    <div> // 자바에서 if 부분 
      {name \=== "액트"? (
        <h1>리액트 입니다.</h1>
        // 자바에서 else
      ) : (
        <h2>리액트가 아닙니다.</h2>
      )}
    </div>
  )
}

AND연산자를 사용한 조건부 렌더링

function App() {
  const name = "웩트" // 상수 선언
  // return <div>{name === '리액트' ? <h1>리액트입니다</h1> : null} </div>;
  return <div>{name === '리액트' && <h1>리액트입니다.</h1>}</div>; 
}

• && 연산자로 짧은 코드로 작업 가능
• 리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않음
• 한가지 주의점은 false 값이 0일 경우 예외적으로 화면에 출력

function App(){
  const number = 0;
  return number &&<div>와?</div>
}

• 이렇게 && 앞에 붙은 조건이 true 값이 true면 와가 출력되어야 하는데 조건이 0 이면 0이 출력된다.

undefined를 렌더링 하지 않기

• undefined만 반환하여 렌더링 하는 상황을 만들면 안됨;
• undefined일 때 사용할 값을 지정 해줘야 한다.
• 책에는 오류 난다 하는데 버전이 업데이트 되어 그런가 오류가 나지 않음.

//undefined를 렌더링 x 
function App(){
  const name = undefined;
  return name || '값이 undefined 임다';
}

// JSX 내부에서 undefined를 렌더링하는 것은 괜춘
function App(){
  const name = undefined;
  // return <div>{name}</div>
  return <div>{name || '리액트'}</div>
}

class 대신 className

• 일반 html에서 css 클래스를 사용할 때는
• 와 같이 속성 설정
• JSX 에서는 class가 아닌 className으로 설정
• App.css 수정 ( 전부 제거 )

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

• 코드 추가

  const name = '랙트';  
  return <div className ="react">{name}</div>; 
  // 이렇게 호출 

JSX 에서는 input 태그를 꼭 닫아야 한다

• js 에서는 input 태그를 닫지 않아도 동작 되지만 jsx에서는 input태그를 닫지 않으면 오류 발생
• 태그 사이에 별도 내용이 들어가지 않는 경우 으로 작성 가능 ( self-closing )

JSX

 

안에서는 {/* */} 로 주석 처리

Prettier

• vs code 에서 f1을 누르고 format

function App2(){
  const name = '헬로우';

  return (
    <div>
      <div className="react">{name
      }</div>
          <h1>들여쓰기가 이상한 코드</h1>
        <h2>따라 치기도 히믈다 </h2>
<p>아따</p>        
    </div>
  )

}


export default App;

• Prittier 사용 후

function App2() {
  const name = "헬로우";

  return (
    <div>
      <div className="react">{name}</div>
      <h1>들여쓰기가 이상한 코드</h1>
      <h2>따라 치기도 히믈다 </h2>
      <p>아따</p>
    </div>
  );
}

• 깔끔
  ~
• 코드가 자동 정렬 되고
• 세미콜론이 빠진 곳에 세미콜론을 붙이고
• 작은 따옴표를 큰 따옴표로 바꾼다.
• js에서는 세미콜론이 코드의 뒷부분에 무조건 있어야 하는 문자가 아니지만 코딩 관습상 입력
• 쉽게 커스터마이징 할 수 있는 장점이 있다.

• react 폴더에 .prettierrc 파일 생성

{
  "singleQuote" : true,
  "semi" : true,
  "useTabs" : false,
  "tabWidth" : 2

}
// 들여 쓰기 할 때 탭 대신 공백 2칸, 큰 따옴표 대신 작은 따옴표,세미콜론 언제나

• Prettier Options 페이지 (https://prettier.io/docs/en/options.html)