JSX문법 문항

JSX 문법을 다루는 문항이었다. 착각하기 쉬운것은 바로 아래와 같은 예제이다.

const Hello = () =>{
	return (
    	[<div>안녕하세요</div>,<div>반갑습니다.</div>]
        )
       }

일단 우리가 앞으로 배열을 가지고 filter와 map 을 하는 과정중에
유동적으로 바꿀수있는 문법의 근간이 바로 '배열'이기 때문이다.
그렇기에 작동이된다.

import './App.css';
import React, {useState} from 'react';
import {Questions} from './Questions';

class App extends React.Component{
	constructor(props) {
    	super(props);
        	this.state = {
            	page : 0,
                };
               }
               
handleCLick() {}

render() {
	return (
    <div className='App'>
    	<div className = 'selectPage'>
        // 예를들어 이렇게된다.
        [<div key ={'a'}>example</div>, <div key={'b'}>example</div>]
           </div>
         </div>
       );
      }
    }

export default App;

이렇게 되어도 작동될수있다. 배열에 들어오는것 직관적으로 확인가능.. 아까 '선언형' 원칙과 부합된다. 배열 syntax가 가능한 이유는 나중에 map과 filter를 쓰기 위함인것이다.

JSX의 중괄호의 원칙

중괄호안에는 자바스크립트의 표현식이 들어간다. 하지만 중괄호안에 조건문은 쓸 수 없다.
자바스크립트의 표현식이란 무엇일까 ?

콘솔에 쳤을때 바로 결과가 나타나는 것이다.

바로 이렇게.. 하지만,

이런 오류가 나는 것은 괄호안에 들어가지 못한다.

한편 우리가 조건문을 쓰기위해선 중괄호안에서의 '삼항연산자'를 이용하거나,
혹은

if 조건문 
else

return ( 
<div>{코드} </div>
) 

이렇게 입력해야 작동이된다. 혹은 함수를 따로 만들고싶다면 , 따로 js파일을 만들어
불러와서 쓰는편이 더 깔끔하다.

JSX 부분인것을 어떻게 구분할까?

어디서 되고 어디서 안되는것은 아님. 하지만 jsx를 다룰때 render() 부분을 특히 조심해야 한다.
JSX코드가 하나의 자바스크립트 코드로 잘 변환할수있는지 확인해보고,
발 변환이 된다면 무조건 잘 작동이된다.

그리고 리턴할때 꼭 잘 감싸야 한다. 잘묶어라..!

import './App.css';
import React, {useState} from 'react';
import {Questions} from './Questions';

class App extends React.Component{
	constructor(props) {
    	super(props);
        	this.state = {
            	page : 0,
                hello :<div>hello</div>
                };
               }

render() {
return {
<div className ="App">
	<div>달력</div>
    <div>자유로운일정</div>
    <div className = "selectPage">
    	<div>{this.state.hello}</div>
     </div>
   </div>
  );
 )
}

export default App;

꼭 해야할 것있으면 constructor에 하는것이 좋긴하나,

render() 전에 따로 함수를 만들거나 혹은,

<div>onClick={this.filterArr.bind(this)}>{this.state.hello></div>

이렇게 추천한다.

리액트는 자기 마음대로 요리하는 앱 이기때문에 자기만의 바람직한 '예시'를 사용자가 따라주는것을 좋아한다.

결론적으로 자바스크립트 상 에러가 났는지 잘 확인하고,
return문의 괄호를 잘 닫아 주면 된다. (오프닝태그 클로징태그.. 잘 감싸줘라)