[React] JSX

javascript라이브러리중 하나인 React는 현재 많은 프론트엔드 개발자들이 사용하는 라이브러리 이다. JXS는 React에서 UI를 더 편하게 사용하기 위해 만들어진 javascript를 확장한 문법이다.

JSX사용 규칙

1. opening tag, closing tag 감싸기

JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에 opening tag, closing tag로 감싸주어야 한다.

<div>
	<h1>Hello</h1>  
</div>
<div>
	<h1>World</h1>  
</div>

<footer>
	<div>
		<h1>Hello</h1>  
	</div>
	<div>
		<h1>World</h1>  
	</div>
</footer>

• 하나의 엘리먼트 안에 모든 엘리먼트가 포함되어야 한다.

2. CSS class속성 지정 시 className으로 표기

class로 작성할 경우 자바스크립트의 class로 받아들이기 때문에 주의해야 한다.

<div className="hello">World</div>

3. JavaScript 표현식 사용 시 중괄호( {} )를 사용

중괄호를 사용하지 않으면 일반 텍스트로 인식하기때문에 JavaScript를 사용하고자 한다면 중괄호를 사용해야 한다.

function App(){
	const name = 'World'
    
    return(
    	<div>
      		Hello, {name}!
      	</div>
    )
}

4. 사용자 정의 컴포넌트는 대문자로 시작

React 엘리먼트가 JSX로 작성 되려면 대문자로 시작해야한다. 이렇게 대문자로 작성된 JSX컴포넌트를 사용자정의 컴포넌트라 한다.

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

function HelloWorld(){
    return <Hello />;
}

5. 조건부 렌더링에서는 삼항연산자 사용

조건부 렌더링은 if문이 아닌 삼항연산자를 사용한다.

<div>
  {
	(1+1 === 2) ? (<p> O </p>) : (<p> X </p>)
}
</div>

6. 여러개의 HTML 엘리먼트를 표시할 때, map() 함수를 사용

여러개의 HTML 엘리먼트를 표시할 때는 map()함수를 사용한다. mpa()함수를 사용할때는 반드시 객체의 'key' JSX 속성을 넣어야 한다. 그렇지 않을시 리스트의 각 항목에 key를 넣어야 된다는 경고가 표시된다.

const posts = [
  {id: 1, title: 'Hello', content: 'World'}
  {id: 2, title: 'ABC', content: 'DEF'}
]

function Blog(){
    const content = posts.map((post) =>
    <div key = {post.id}>     //차례로 엘리먼트에 넣고싶은 key값을 넣는다.
        <h3>{post.title}</h3>
        <p>{post.content}</p>
    </div>
    );
    return(
        <div>
            {content}
        </div>
    )
}