This content got low rating by people.

[개발] 리엑트를 다루는 기술 02/28

wonsama(71)

Published in

mini.topia

Words

263

Reading

2 min

Listen

Play

리엑트를 다루는 기술을 하나씩 따라 해보면서 다른 분들도 따라 해 볼 수 있도록 대략적으로 기록을 남깁니다. (자세한 내용은 위 도서 리엑트를 다루는 기술를 구매 후 참조 하시면 됩니다. )

이전 글 목록

01-리엑트 시작

es5 코드 변환

구버전의 웹 브라우저에서는 JSX 문법 및 ES6 / ES7 등과 같은 문법을 이해할 수 없어서 Babel 과 같은 도구를 사용하여 ES5로 트랜스코딩(변환) 합니다.

JSX

JSX란 javascript 확장 문법 입니다.
가독성이 높고 HTML 태그와 유사해 손쉽게 작성을 할 수 있습니다.

JSX 문법 - 부모요소

여러개의 요소가 하나의 부모 요소로 감싸져야 합니다.

react 16 이상에서는 Fragment 를 사용하여 부모요소를 대체 할 수 있습니다.

import React from 'react';

function App(){
    return(
        <div>
            <h1>REACT</h1>
            <h2>TEST</h2>
        </div>
    ); 
}

export default App;

JSX 문법 - 조건부 연산자

JSX 문법 내에서는 {} 안에 조건부 연산자를 사용 할 수 있습니다.

예시) 상수로 지정한 name의 값에 따라 결과가 다르게 나타남

import React from 'react';

function App(){
    const name ='REACT';
    return(
        <div>
            {
                name=='REACT'?
                (<h1>IS REACT</h1>):
                (<h2>IS NOT REACT</h2>)
            }
        </div>
    ); 
}

export default App;

&& 연산자를 사용하면 더 짧은 코딩으로 참인 경우에만 작업을 처리 할 수 있습니다.

import React from 'react';

function App(){
    const name ='REACT';
    return(
        <div>
            {
                name=='REACT'&&
                (<h1>IS REACT</h1>)
            }
        </div>
    ); 
}

export default App;

참조 : JSX를 작성할 때 한줄로 표현할 수 있으면 ()괄호를 사용하지 않아도 됩니다.

JSX 문법 - className

일반 HTML 에서 CSS 클래스를 사용할 때는 <div class='clzName'></div> 와 같이 class 라는 속성을 설정합니다. 하지만 JSX에서는 class 가 아닌 className으로 설정해 주어야 합니다.

.react{
    background: aqua;
    color: black;
}

import React from 'react';
import './App.css';

function App(){
    const name ='REACT';
    return <div className='react'>{name}</div>; 
}

export default App;

JSX 문법 - 꼭 닫아야 되는 태그

일반적으로 html에서는 input 과 같은 태그는 을 사용하지 않아도 잘 동작하지만 react 에서는 문법 오류를 발생시키므로 반드시 사용해야 됩니다.

import React from 'react';
import './App.css';

function App(){
    const name ='REACT';
    return (
        <>
            <div className='react'>{name}</div>
            <input></input>
        </>
    );
}

export default App;

JSX 문법 - 주석

태그 외부에서는 {} 를 사용하여 주석을 기록합니다.

import React from 'react';
import './App.css';

function App(){
    const name ='REACT';
    return (
        <>
            {/* 주석은 이런 식으로 작성 */}
            <div className='react' // 태그 중간에서는 이런식으로 주석사용 가능
            >{name}</div> 
            // 이런 주석
            /* 또는 이런 주석은 페이지에 노출 됨에 유의 */
        </>
    );
}

export default App;