React basic # 2
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문의 괄호를 잘 닫아 주면 된다. (오프닝태그 클로징태그.. 잘 감싸줘라)
Author And Source
이 문제에 관하여(React basic # 2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@corepen_/React-Basic-2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)