리액트 JSX 문법

React는 JSX사용이 필수가 아닙니다. 다음 링크를 참조하세요~!

https://ko.reactjs.org/docs/react-without-jsx.html 

JSX 없이 사용하는 React – React

일단 저는 JSX에 대해 알아보겠습니다.

---

JSX 소개

 

const element = <h1>Hello, world</h1>;

이 문법이 바로 JSX입니다. HTML도 아니고 자바스크립트도 아닙니다.

JSX는 자바스크립트의확장된 문법이며 XML과 비슷하게 보이기도 합니다.

 

이렇게 작성된 코드는 브라우저에 실행되기전에 바벨을 거쳐 일반 자바스크립트 코드로 변환됩니다. 

쉽고 익숙한 JSX  : JSX는 HTML 코드를 작성하는 것과 비슷해서 가독성이 높고 작성하기에 쉽다고 느껴집니다. JSX를 사용하는 대표적인 이유입니다.

활용도가 높은 JSX : HTML 태그 뿐만아니라 컴포넌트도 JSX안에서 작성 가능 합니다. 

 

---

JSX 문법

 

감싸인 요소

function App() {
  return (
    <fragment>
      <h1>Hello! World!</h1>
    </fragment>
    );
}

return 바로 아래에 fragment로 감싸주었습니다. fragment는 v16 이상부터 도입되었습니다. 혹은 div로 감싸주어도 됩니다. 하나의 요소로 꼭 감싸주는 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다.

 

자바스크립트

function App() {
  const element = <h1>Hello, world</h1>;
  return (
    <>
      <div>{element} <h4>!!!</h4></div>
      <h2>I am dooyou</h2>
    </>
  );
}

자바스크립트를 작성하려면 JSX에서 중괄호{ } 로 감싸주면 됩니다. 

 

JSX 내부에서는 if문 대신 조건부 연산자 사용하기

JSX 내부에서 if문을 사용 할 수 없지만 중괄호 { }안에 조건부 연산자를 사용하면 됩니다.

조건부 연산자 = 삼항 연산자

function App() {
  const element = '강아지';
  return (
    <>
      <div>{element === '강아지' ? (<h1>강아지 입니다.</h1>) : (<h1>강아지가 아닙니다.</h1>)}</div>
      <h2>I am dooyou</h2>
    </>
  );
}

조건부 연산자

 

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

특정 조건에 만족할 때 내용을 보여주고, 아닐 때는 아예 아무것도 렌더링 하지 않아야 하는 상황이라고 가정해봅시다. 이때도 조건부 연산자를 통해 구현 할수 있지만 null을 렌더링 하면 아무것도 보여주지 않습니다.

function App() {
  const element = '고양이';
  return (
    <>
      {element === '강아지' ? (<h1>강아지 입니다.</h1>) : null}
    </>
  );
}

null일 때 아무것도 보여주지 않습니다.

같은 결과인데 AND 연산자 (&&)를 쓸 수 있습니다.

function App() {
  const element = '고양이';
  return (
    <>
      {element === '강아지' && <h1>강아지 입니다.</h1>}
    </>
  );
}

리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타내지 않기 때문입니다. 주의할 점은 falsy한 값이 0일 경우에는 예외적으로 화면에 나타납니다.

function App() {
  const num = 0;
  return (
    <>
      {num && <h1>숫자</h1>}
    </>
   );
}

falsy 0 

undefined 렌더링하지 않기

에러남 :

function App() {   const name = undefined;   return name; }

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 에러가 뜹니다.

Error

 

이럴 때는 OR( || ) 연산자를 사용하면 오류를 방지 할 수 있습니다.

 

에러 안남:

function App() {   const name = undefined;   return name || ' 값이 undefined입니다.' }

 

JSX 내부에서 undefined를 렌더링하는 것은 괜찮습니다.

에러 안남 :

function App() {   const name = undefined;   return (     <>       {name}     </>   ); }

 

인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 합니다. 스타일 이름 중에서 background-color처럼 - 문자가 포함되는 이름이 있다면, - 를 없애고 카멜  표기법으로 작성합니다. backgroundColor로 작성하면 됩니다.

이런식으로 작성하고

결과 화면입니다.

class 대신 className

HTML에서 CSS 클래스를 사용 할때는 <h1 class="titleBic"></h1> 이런식으로 사용하지만 JSX에서는 class가 아닌 className으로 설정해야 합니다.  

function App() {   const element = '강아지';   return (     <>       <h1 className='titleBic'> {element} </h1>     </>   ); }

 

태그 꼭 닫아주기

HTML에서 태그를 닫지 않은 경우가 있습니다. input은 닫지 않아도 잘 작동하죠. 그러나 JSX에서는 <input></input>이라고 써주어야만 에러가 나지 않습니다.

 

주석

JSX 내부에 주석을 작성할 때는 { /* 주석입니다 */ } 이렇게 작성해야합니다. 익숙한 한줄 주석 표기 // 나 중괄호 없이 주석표기 /* */ 를 한다면 주석으로 작동하지 않고 페이지에 그대로 노출됩니다.