리액트 JSX

JSX는 가독성이 높고 작성하기 싶다 

JSX는 html태그 뿐만 아니라 컴포넌트 안에서 작성할 수 있다.

ReactDom.render 컴포넌트를 페이지에 렌더링하는 역할, react-dom 모듈을 불러와 사용가능

첫 번째 파라미터에는 페이지에 렌더링할 내용으 JSX 형태로 작성, 두 번째 파라미터에는 해당 JSX

렌더링할 document 내부 요소를 설정 

React.StrictMode

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

JSX특징

1. 감싸인 요소 = 컴포넌트 여러 요소가 반드시 하나의 요소로 감싸줘야 한다.

function App() {

return (

<div>

<h1>리액트 안녕</h1>

<h1>리액트 작동</h1>

</div>

);

}

왜 하나의 요소로 묶어야 하나면 

virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록

컴포넌트 내부는 하나의 DOM트리로 이루어 져야 하기 때문이다.

 

2. 자바스크립트를 작성하려면 {}로 감싸면 된다.

function App() {

const name = "안녕"

return (

<div>

<h1>리액트 {name}</h1>

<h1>리액트 작동</h1>

</div>

);

3. if 문 대신 조건부 연산자

jsx 내부의 자바스크립트 표현식에는 if문을 사용할 수 없다.

삼항 연산자로 인해 표현 할 수 있따.

function App() {

const name = "안녕"

return (

<div>

<h1>리액트 {name==="안녕"?<h1>리액트</h1>:<h2>리액트가 아니다.</h2>}</h1>

<h1>리액트 작동</h1>

</div>

);

}

 

export default App;

4. and 연산자를 사용한 조건부 렌더링

function App() {

const name = "안녕"

return (

<div>

<h1>리액트 {name==='리액트' && <h1>리액트입니다.</h1>}</h1>

<h1>리액트 작동</h1>

</div>

);

}

5. 인라인 스타일링

const style = {

backgroundColor: 'black'

}

background-color처럼 -문자를 적으면 안되고 카멜표기법으로 표시

6. Class 대신에 className으로 표현

<div className="react> 이렇게 표현

 

ESLINT 문법 검사도구 , Prettier 코드 정리 도구