[TIL] 230203 JSX

JSX?

// JavaScript를 확장한 문법 
// JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법 
const element = <h1>Hello, world!</h1>;

리액트는 딱 하나의 HTML 파일만 존재 한다. (public 폴더 아래 index.html)

리액트에서 뷰를 그리는 방법은 JSX문법을 사용하여 React 요소를 만들고 DOM에 렌더링 시켜서 뷰를 그리게 된다.

사용 방법

일반적으로 React 에서는 Html을 사용할 수 없다.

<div> 
    <h1>서근 개발 노트</h1> 
    <p>환영합니다.</p> 
</div>

그래서 나온게 JSX!

const start_half = 
    <div> 
      <h1>안녕하세요!</h1> 
      <p>시작이 반이다!</p> 
    </div>;

VSCode 에서 react snippet 익스텐션을 깔면 자동으로 스니펫이 추가되니 꼭 설치하자
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

JSX 주의사항

1) 태그를 닫자

input 요소에서 반드시 마지막에 닫는 태그를 써주자.

<input type='text'/>

2) 무조건 1개의 엘리먼트를 반환해라

리액트의 컴포넌트에서 반환할 수 있는 엘리먼트는 1개 이기 때문에 div 태그안에 요소들을 작성해야 한다.

function App() { 
    return ( 
    <p>안녕하세요!</p>  
    <div className="App"> 
        <input type='text'/> 
    </div> 
    ); 
}

위 코드는 p태그 하나만 반환되기 때문에 에러 

 

이런식으로 작성하면 됨!

function App() { 
    return ( 
    <div className="App"> 
    <p>안녕하세요</p> 
        <input type='text'/> 
    </div> 
    ); 
}

3) JSX에서 JS 사용

JSX 내부에서 중괄호를 열어 JS를 사용할 수 있다.

function App() { 
    const myName = '서근'; 
    const num = 1'
    return ( 
    <div> 
        <p>hello {myName}!</p>
        <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
    </div> 
    ); 
}

4) class 는 className 으로

일반적으로 Html에서 클래스명 속성을 넣어주듯이 class="" 를 하는것이 아닌 className="" 처럼 사용해야 한다.

<div calssName="title">안녕하세요</div>

5) 인라인 Style.css

Html에서 태그 안에 스타일을 적용했듯이, JSX에서도 가능하지만 사용 방법이 조금 다르다

 

HTML

<!--일반적인 HTML--> 
<div class="someClass" style="background-color: tomato">안녕하세요<div>

JSX

<div className="someClass" style={{
    color: 'red',
    backgroundColor: 'toma'                                  
}}>안녕하세요<div>

주의할점은 JSX에서는 - 를 사용해서는 안된다.

스타일 객체를 변수로 만들고도 사용가능하다.

const App = () => {
    const style = { color: 'red', backgroundColor: 'tomato'}
    return (
        <div style={style}>안녕하세요</div>
    );
}