🌙 [React] JSX 문법

🌊 JSX

: JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다. JSX로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태이 코드로 변환된다.

 

JSX의 장점

1. 가독성이 좋다.
2. 활용도가 높다.

 

JSX 문법

 

• 감싸인 요소
  리액트에서 JSX를 반환할 땐 하나의 태그만 반환해야한다. 
  다수의 태그를 반환하고 싶을 땐 부모 태그로 감싸줘야 한다.
  스타일링을 해야하는 경우가 아니라면 빈 태그를 부모처럼 사용하여도 괜찮다. <> </>
• 자바스크립트 표현
  JSX 내부에서 자바스크립트 표현식을 사용할 수 있으며, JSX 내부에서 코드를 {} 중괄호 로 감싸주면 된다. 
• if문 대신 조건부 연산자
  jsx 내부의 JS 표현식에서 if문을 사용할 수 없다. 조건에 따라 다른 내용을 렌더링 해야 할 때는 JSX 밖에서 if문을 사용하여 사전 값을 설정하거나, {} 안에 삼항연산자를 사용한다.
• AND 연산자(&&)를 사용한 조건부 렌더링
  → &&는 조건이 둘 다 true이면 뒤의 조건을 출력한다.

const name = '오구';
return <div>{name === "오구" && <h1>오구 좋아</h1>}</div>

• undefined를 렌더링하지 않기.
  어떤 값이 undefined일 수 있다면 OR(||)연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다. 

return undefined || '값이 undefined 입니다';

• Inline 스타일링
  • inline으로 스타일을 적용할 때는 문자열 형태가 아닌 객체 형태로 넣어야한다.
  • background-color처럼 -문자가 포함되어 있으면 -를 없애고 camelCase로 작성해야한다. 
    ex) background-color → backgroundColor

<p style={{color: #F7D865}}>{ogu}</p>

• JSX에선 class가 아닌 className를 사용한다.
• 꼭 태그를 닫아야한다.

<input></input> // 태그 사이에 별도의 내용이 들어가있지 않는 경우는 아래처럼 작성한다.
<input/> // self-closing 태그

 

리액트를 다루는 기술을 참고하였습니다.