[React] JSX

JSX

(JavaScript XML)

 

JavaScript 를 확장한 문법입니다.

 

DOM에서 JavaScript와 함께 사용하기 위해서는 JavaScript와 HTML를 연결하기 위한 작업이 필요합니다.

 

하지만 React에서는 JSX를 이용하여 DOM 코드보다 명시적으로 코드를 작성할 수 있고,

JavaScript와 HTML를 연결하는 작업도 하지 않아도 됩니다.

반응형

---

JSX 문법

● 여러 element를 작성하는 경우, 최상위에서 <Opening tag>와 </Closing tag>로 감싸주어야 합니다.

<div>  <!-- <Opening tag> -->
    <div>
        <h1>Hello</h1>
    </div>
    <div>
        <h2>World</h2>
    </div>
</div>  <!-- <Closing tag> -->

 

● CSS Class 속성을 지정하는 경우, JS와 다르게 'className'으로 표기해야 합니다. (JS는 class)

     (class로 작성하는 경우 JS의 class로 인식합니다.)

<!-- JS의 class로 인식 -->
<div class="hi">hello</div>

<!-- React의 className으로 인식 -->
<div className="hi">hello</div>

 

● JSX에서 JavaScript를 쓰고자 한다면, 중괄호{ }를 이용해야 합니다.

      (중괄호를 사용하지 않으면 Text로 인식합니다.)

function App() {
    const name = 'kimcoding';
    return (
        <div>
            Hi!, {name}
        </div>
    );
}    // Hi!, kimcoding

 

● 사용자 정의 컴포넌트(component)를 작성하는 경우, '대문자'로 시작해야 합니다.

// BAD
function hello () {
    return <div>Hello!</div>
}

function helloworld () {
    return <hello />
}

// GOOD
function Hello () {
    return <div>Hello!</div>
}

function Helloworld () {
    return <Hello />
}

 

● 조건부 렌더링은 삼항연산자를 사용합니다. (if문 X)

<div>
    {
      1+1 === 2 ? <p>정답</p> : <p>탈락</p>
    }
</div>

 

● map() 함수 사용 시 반드시 'key' JSX 속성을 넣어야 합니다.

    (key 속성을 입력하지 않은 경우, 경고가 발생합니다.)

    (key 속성 값은 가능하면 데이터에서 제공하는 id값을 할당해야 합니다.)

 

key 속성을 넣지 않았을 때 발생하는 경고 표시

 

function todoList () {
    const content = lists.map(todo) => {
        <div key={todo.id}>
            <h3>{todo.title}</h3>
            <p>{todo.content}</p>
        </div>
    }
}

 

● State 값이 업데이트가 되면 자동으로 렌더링해주는데, 랜더링하면서 함수도 처음부터 다시 읽습니다.

     (= State가 변경되어 렌더링 되면 함수 안의 변수의 값은 초기화 된다.)

---

컴포넌트 란?

(Component)

 

하나의 기능 구현을 위한 여러 종류의 코드 묶음입니다.

 

컴포넌트도 DOM과 같이 트리구조를 띕니다.

 

Component를 모아 UI를 만들 수 있고, UI를 모아 최종적인 Application를 만들 수 있습니다.

---

 

 

JSX를 알아보는 시간이었습니다.

틀린 내용은 댓글로 알려주시면 감사하겠습니다.