저번 글에서는 리액트에 관한 정보와 실행법을 알았다면
이번 글은 대략 어떤 식으로 작성하는지 알아볼 것이다! 크크

🐾 React

👣 JSX 사용법

1) 최상위 요소는 형제가 없는 고유한 요소! 반드시 부모 요소 하나가 감싸는
형태를 가져야 한다.

function App() {                             function App() {
	return (                                     return (
		<div>Hello</div>          =>                   <>
		<p>Nice ~~~~</p>                               <div>Hello</div>
	);                                                 <p>Nice ~~~~</p>
}                                                    </>
                                                 );
                                                 }

** 무조건 <> </> 이여야 되는 것이 아닌 부모요소가 있으면 됨! ex) <div></div>, <Fragment></Fragment> 등

2) JSX 안에서 JavaScript 사용이 가능하다.

function App() {
	const name = 'yujin';
	return (
		<div>
			<div>Hello {name}</div>
			<p>Nice ~~~~</p>
		</div>
	);
}

** 대신 JavaScript를 사용할 때에는 { } 안에 작성하여 사용한다.

3) 연산자를 사용할 때는 아래의 방법을 이용해야 한다.

1. 계산을 다 한 후, 변수에 담아서 JSX 문법에서 보여주기

    function App() {
       let flag = true;
       let txt = "";
       
       if ( flag ) txt = "True입니다.";
       else txt = "False 입니다.";
       
       return (
        <div>{txt}</div>
        );
        
2. {} 안에서 삼항 연산자 이용하기 ( if X,  for X )

function App() {
     let flag = true;	
     return (
       <div>
         { flag ? (<h1>True입니다.</h1>) : (<h1>False입니다.</h1>) }
      </div>  
      );
      
  //
      
  function App() {
     let flag = true;	
     return (
       <div>
       	{ flag && (<h1>True일 때만 보이는 True 입니다.</h1>)}
       </div>  
      );

4) 요소에 스타일을 적용할 때는 문자열이 아닌, 객체 형태로 사용

function App() {
	const style = {
		backgroundColor: 'green',
		fontSize: '12px'
	}
	return (
		<div style={style}>Hello</div>
	);
}

5) Style을 이용할 때는 camelCase를 이용!

background-color X                    backgroundColor O
font-size X                           fontSize O

HTML의 attribute를 쓸 때도 camelCase를 이용
class X                               className O

6) 종료태그는 필수!

function App() {                             function App() {
	return (                                     return (
		<div>Hello</div>          =>                   <>
		<p>Nice ~~~~</p>                               <div>Hello</div>
        <br>                                           <p>Nice ~~~~</p>
	);                                                 <br />
}                                                    </>
                                                 );
                                                 }

7) 주석 사용

function App() {
	return (
		<>
			{/* 주석사용방법 */}
			<div>Hello</div>
		</>
	);
}

** JSX 안에서 주석을 사용할 때는 {/*    */} 형태로 사용