React) 2장 JSX문

JSX : 자바스크립트의 확장 문법이며 브라우저에서 실행전 번들링에서 바벨을 통해 일반 JS형태로 바꿈

   JSX를 사용하면 React.creatElement함수를 사용할 필요가 없기에 편하게 UI렌더링 가능

   JSX는 JS문법이 아니다 (바벨로 사용할 수 있게 설정한 것이다)

ReactDOM.render

컴포넌트 페이지에 렌더링 하는 역활

첫번째 파라미터에서 페이지에 렌더링할 내용을 JSX로 작성

두번째 파라미터에서 해당 JSX를 렌더링할 도큐먼트 내부요소 작성

 

React.StrictMode

리액트 프로젝트에서 리액트의 래거시 기능들을 사용하지 못하게 하는 기능

나중에 사라질 문자열 ref, componentWillMount 등을 사용했을 때 경고를 출력

JSX의 장점

1️⃣보기쉽고 익숙하다

2️⃣더 높은 활용도

 

JSX는 편한 문법이지만 몇가지 규칙을 지켜야 한다.

 

1️⃣감싸인 요소

컴포넌트에 여러 요소가 있다면 하나의 부모요소로 감싸야 한다.

VirtualDOM에서 컴포넌트의 변화를 감지해 효율적으로 비교할 수 있게 내부는 한개의 DOM트리 구조로 구성되야함

대부분은 div태그를 이용하지만 Fragment태그를 이용해도된다.(이용시 import {Fragment} from `react` 코드 작성)

 

2️⃣자바스크립트 표현

JSX내부에서 자바스크립트 표현은 {} 중괄호로 감싸주어 표시한다.

ex) <h1>{name}</h1>

 

3️⃣if 문 대신 조건부 연산자 사용

JSX 내부에서는 if 문을 사용할 수 없지만 조건에 따라 내용을 랜더링 할 때 조건부 연산자를 사용하자

(JSX 외부에서 if 문을 사용해 사전값을 설정하여 if문을 사용할 수 있다)

<div>{(name1 === `React` ? <h1>리액트 if 문 대신 조건부 연산자 사용</h1> : <h1>라액트 아님</h1>)}</div>

4️⃣And 연산자(&&)를 사용한 조건부 렌더링

조건 만족시 렌더링, 아니면 렌더링이 없을때 사용

And 연산자로 조건부 렌더링이 가능한 이유는 false 렌더링 시 null과 마찬가지로 아무것도 나타나지 않음

falsy한 값인 0은 예외적으로 화면에 나타남

JSX를 한줄로 표현이 가능하다면 return문에 괄호는 필요 없다.

<div>{name1 === `React` && <h1>리액트 &&연산자 사용 조건부 렌더링</h1>}</div>

5️⃣undefined를 렌더링 하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하면 에러가 발생한다.

어떤 값이 undefined일 수 있다면, OR( || )연산자를 사용해 오류를 방지하자

<div>{name2}</div>  {/*undefined일때는 빈칸으로 null이 출력, JSX내부에서 undefined랜더링은 가능하다*/}
<div>{name2 || `undefined일때 문구 표현`}</div>
{/* 기본적으로 name || `표시할 문구`; 의 형식으로 사용하는게 기본, 하지만 유연함을 찾아서 사용할 것*/}

6️⃣인라인 스타일링

리액트에서 DOM요소에 스타일을 적용할 때는 문자열이 아닌 객체형태로 넣어야 한다.

또한 카멜 표기법으로 작성한다.

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

<div style={style}>인라인 스탕일링을 통한 스타일 적용</div>
{/* 미리 스타일 객체를 선언 하지 않을려면 style={{backgroundColor:`black`}}의 형태로 작성해야 한다 */}

7️⃣class 대신 className

JSX에서는 속성을 설정할 때 class가 아닌 className을 사용한다

리액트 v16 이후 부터는 class를 className으로 자동으로 변환하고 경고를 띄운다.

<div className="react">class대신 className을 이용한 css적용</div>

8️⃣꼭 닫아야 하는 태그

HTML에서 inpu, br과 같이 안닫아도 되는 태그들을 JSX에서 사용할 때는 꼭 닫아야 한다.

<div>
        <div className="react">닫아야 하는 태그, self-closing태그</div>
        <input></input>
        {/* <input />이렇게 사용해도 닫힌다. 이 방법은 self-closing 태그라 한다. */}
      </div>

9️⃣주석

항상 리액트에서 주석은 " { /* */ } "로 작성되며 이외의 // , /* */ 와 같은 주석은 JSX안에 작성하면 그대로 보여진다.

{/* 주석은 항상 이러한 폼으로 작성해야하며 이외의 폼은 모두 화면에 출력된다. */}

 

🔟ESLint와 Prettier

🔟.1️⃣ESLint

문법 검사 도구이며, 코드작성 시 VS Code 에디터에서 에러 혹은 경고 메시지를 출력한다.

초록색 경고 밑줄은 무시해도 되지만, 빨간색 밑줄은 치명적 오류이기 때문에 꼭 고쳐야한다.

 

🔟.2️⃣Prettier

코드 스타일 자동 정리 도구이며, JSX 작성시 들여쓰기로 가독성을 높임

정리스타일도 커스터 마이징이 가능하다

저장시 코드 정리는 설정 > format on save 체크하면 된다.

 

 

총정리!

JSX는 HTML과 비슷하지만 같지는 않다.

자바스크립트 객레이며, 용도와 문법의 차이가 있기에 사용에 주의가 필요하다.