[React 기초 문법] #1 intro + JSX 몇 가지 규칙

Intro

 

리액트가 참 재밌는데, 구현해보고 싶은게 많은데 

 

뜻대로 움직이지 않는 그리고 예측하지 않은 결과가 반복되면서 

 

내가 원하는 기능과 모습을 구현하기 위해서는(재밌는 것을 만들기 위해서는...)

 

기초 문법을 반드시 잘 다져야겠다라고 생각하여 새로운 카테고리를 팠다.

 

모래 위의 성보다는 튼튼한 반석위에서 리액트라는 성을 지으리라  

 

JSX 몇 가지 규칙

 

  컴포넌트의 여러 요소들은 반드시 하나의 부모 요소로 감싸여져 있어야 한다. 

 

    여기서 하나의 부모 요소는 반드시 <div></div> 태그가 아니어도 좋다.

 

    import React, {Fragment} from "react"; 한 후 <Fragment></Fragment>를 사용해도 된다.

 

    <Fragment></Fragment>대신 <></>을 사용할 수도 있다.

 

참고로 <></>는 import를 안해도 되었기에 나는 이것을 더 많이 사용한 것 같다. 

 

  자바스크립트 표현식은 JSX안에서 {}로 감싸면 된다.

 

  JSX 내부의 자바스크립트 표현식에서는 if문을 사용할 수 없다. (삼항연산자를 사용하여야 한다.)

 

물론 JSX 외부에서는 if문을 사용할 수 있다.

 

  &&을 통한 조건부 렌더링

 

import React from "react";

function App() {
	const name = "Park";
	return <div>{name === "Park" ? <h1>Daniel</h1> : null}</div>;
}

export default App;

//위의 코드와 아래의 코드는 같다. 

import React from "react";

function App() {
	const name = "Park";
	return <div>{name === "Park" && <h1>Daniel</h1>}</div>;
}

export default App;

 

  class 대신 className을 사용한다.