[React] JSX

Javascript XML의 약자 JSX

리액트로 개발할 때 사용되며 공식적인 js 문법은 아님

브라우저에서 실행하기 전 babel을 사용하여 js 형태의 코드로 변환된다

 

부모 요소로 감싸는 형태여야 함

const Test = () => {
  return (
    // 부모 div
    <div>
      <p>내용</p>
    </div>
  )
}

const Test = () => {
  return (
    // 이런식으로도 가능하다(Fragment 태그)
    <>
      <p>내용</p>
    </>
  )
}

 

오류 예시

const Test = () => {
  return(
  // 부모 요소가 없음
    <div>내용</div>
    <div>내용</div>
  );
}

 

 

 

JSX 내에서 자바스크립트 표현식 작성시 {중괄호} 로 감싸주기

import React from 'react';

const Test = () => {
  const name = 'dust';
  return (
    <div>{name}</div>
    // 중괄호로 감싸주기
    // dust
  );
}

export default Test;

 

 

 

class --> className

import React from 'react';

const Test = () => {
  const name = 'dust';
  return (
    <div className="title">{name}</div>
    // class는 className으로 변경
  );
}

export default Test;

 

 

 

삼항연산자

import React from 'react';

const Test = () => {
  const name = 'dust';
  return (
    <div>
      {name === 'dust' ? (<h1>먼지</h1>) : (<h1>not 먼지</h1>)}
      <!-- { 조건 '내용' ? (true) : (false) } --> 
      <!-- { 조건 '내용' ? (true) : null }  -- null일경우 값을 null로 설정 -->
      <!-- <h1>먼지</h1> -->
      <div className="title">{name}</div>
    </div>
  );
}

export default Test;

+ &&({ 조건 '내용' ? (true) : null } 일 경우 사용)

import React from 'react';
import Popup from './Popup';
// Popup 렌더링, Popup 파일내용은 일단 제외

const Test = () => {
  // Popup
  const [popup, handlePopup] = useState(true);
  // useState(false); 일 경우 비활성화

  const name = 'dust';
  return (
    <div>
      {name === 'dust' ? (<h1>먼지</h1>) : (<h1>not 먼지</h1>)}
      <div className="title">{name}</div>
      {popup && <Popup />}
      <!-- popup 출력시 Popup 렌더링 -->
    </div>
  );
}

export default Test;

import React from 'react';
import Popup from './Popup';

const Test = () => {
  const [popup, handlePopup] = useState(false);
  
  var status = 'info';
  // 상태값

  const name = 'dust';
  return (
    <div>
      {name === 'dust' ? (<h1>먼지</h1>) : (<h1>not 먼지</h1>)}
      <div className="title">{name}</div>
      {popup && <Popup />}
      <!-- 상태값 변경에 따른 결과 출력 -->
      {
        { 
          info : <div>info</div>,
          menu : <div>menu</div>,
          shop : <div>shop</div>
        }[status]
      }
    </div>
  );
}

export default Test;

참고

https://codingapple.com/unit/react-if-else-patterns-enum-switch-case/

리액트에서 자주쓰는 if문 작성패턴 5개 - 코딩애플 온라인 강좌

 

 

 

태그는 꼭 닫기

import React from 'react';
import Popup from './Popup';
import Sub from './sub';

const Test = () => {
  const [popup, handlePopup] = useState(false);
  // 팝업 비활성화

  const name = 'dust';
  return (
    <div>
      {name === 'dust' ? (<h1>먼지</h1>) : (<h1>not 먼지</h1>)}
      <div className="title">{name}</div>
      {popup && <Popup />}
      <!-- Popup파일 / 닫기 -->
      <div>
        <input />
        <Sub />
        <!-- 태그 닫기 -->
      </div>
    </div>
  );
}

export default Test;

 

 

 

화살표 함수는 뭘까,,

import React from 'react';

const Test = () => {
// function Test(){} --> const Test = () => {}

  const [number, setNumber] = useState({ number: 0, fixedNumber: 0 });
  
  return (
    <div className="btn-set">
        <button
          type="button"
          onClick={() => {
            setNumber({
              number: number.number + 1,
              fixedNumber: 0,
            });
          }}>
          <!-- 함수 선언이랑 비슷한 느낌 -->
          <!-- onClick function(){} -> onClick{() => {}} -->
          <!-- 객체인경우 괄호로 감싸서 표현 -->
          플러스
        </button>
        <button
          type="button"
          onClick={() => {
            setNumber({
              number: number.number - 1,
              fixedNumber: 0,
            });
          }}>
          마이너스
        </button>
      </div>
  );
}

export default Test;

 

 

 

 

참고

https://min-ji07.tistory.com/entry/React-%EA%B8%B0%EC%B4%88-1?category=926976 

[React] 기초 공부

! JSX, useState, useCallback, useEffect !