-
[React.js] JSX(Syntax extension for JS)Front-End(Web)/React - 프레임워크(React, Next) 2020. 11. 23. 23:44반응형
🤷 React.js 사용하는 이유
-
[빠름, Virtual DOM] React is fast. Apps made in React can handle complex updates and still feel quick and responsive.
-
[간결함] React is modular. Instead of writing large, dense files of code, you can write many smaller, reusable files. React’s modularity can be a beautiful solution to JavaScript’s maintainability problems.
-
[대용량에 유리] React is scalable. Large programs that display a lot of changing data are where React performs best.
-
[유연함] React is flexible. You can use React for interesting projects that have nothing to do with making a web app. People are still figuring out React’s potential. There’s room to explore.
-
[범용성] React is popular. While this reason has admittedly little to do with React’s quality, the truth is that understanding React will make you more employable.
📒 JSX : syntax extension for javascript
- JSX는 자바스크립트 expression 취급. 변수에 저장되어, 배열 / 객체 / 함수 응용가능.
- JSX 안에 HTML처럼 작성가능. id/class 지정하거나, inline CSS 통해서 속성을 부여하는 기능 등.
- 하나의 변수에 다중태그를 wrap하는 JSX도 가능. (단, 괄호로 묶어야 함. 2개 이상의 태그는 안되며 1개의 부모태그로 wrap 해야함.)
- ReactDOM.render(): JSX 렌더링을 위한 라이브러리 및 메소드
import React from 'react'; import ReactDOM from 'react-dom'; // Write code here: ReactDOM.render(<h1>Render me!</h1>, document.getElementById('app'))
* 사용법: render('표현하려는 내용', ... , '내용을 포함할 컨테이너'). 표현하려는 내용은 JSX 뿐만 아니라 변수도 사용가능.
const myList = ( <ul> <li>macdonald</li> <li>burgerking</li> </ul> ); ReactDOM.render(myList, document.getElementById('app'))
render()의 강점은, 바뀐 DOM 부분만 수정을 한다. Virtual DOM, 가상DOM을 수정한 뒤 이전DOM과 비교하여 변경된 부분만 수정.
관련 article: www.codecademy.com/articles/react-virtual-dom
- JSX 심화문법
1) className: JS에서는 class 기능을 제공하므로, class는 className=""로 명명해야 한다.
//wrong JSX const wrongClass = <div class="hi">hi</div>; //right JSX const rightClass = <div className="hi">hi</div>;
2) self-closing tag: <img />, <br />과 같이 태그쌍을 쓰지 않는 경우, HTML은 상관없었으나 JSX는 닫기(/) 반드시 해야한다.
//wrong JSX const wrongBr = hi<br>hello //right JSX const rightBr = hi<br />hello
3) Javascript형 작성({중괄호}): JSX구문 내에서 Javascript처럼 작성하고자 할 때 사용하는 방법.
const wrongPlus = ReactDOM.render(<h1>2+3</h1>, document.getElementById('app')); // 2+3 const rightPlus = ReactDOM.render(<h1>{2+3}</h1>, document.getElementById('app')); // 5
- {중괄호} 코드는 Javascript도 JSX도 아님. 비유하자면 //인용문 처럼 그 구간만 JS로 취급하는 JSX 내용인 것.
- {중괄호}는 JS 구간으로 기존에 선언한 변수를 가져올 수 있다. (Array[index], Object.key 역시 가능)
const ment = 'What would happen?'; ReactDOM.render(<h1>{ment}</h1>, document.getElementById('app')); // What would happen?
- 선언한 함수도 HTML Event Listner 등으로 활용할 수 있다.
function myFunc() { alert('JSX was clicked!') }; const image = <img src="~.jpg" onClick="{myFunc}" />; ReactDOM.render(image, document.getElementById('image')); // when image is clicked, alert message will be displayed.
4) if-else 조건문: JSX 내에서 if-else문 사용이 불가하다. 밖에 if문을 쓰거나, 안에서 삼항연산자 쓰는 등 아래 주요방법을 숙지하자!
- if문에 JSX 작성
function coinToss() { return Math.random() < 0.5 ? 'heads' : 'tails'; } const pics = { kitty: 'https://content.codecademy.com/courses/React/react_photo-kitty.jpg', doggy: 'https://content.codecademy.com/courses/React/react_photo-puppy.jpeg' }; // 1. 변수 선언 let img; // 2. if문에 따른 변수 JSX property 지정 if (coinToss() === 'heads') { img = <img src={pics.kitty} />; } else { img = <img src={pics.doggy} />; } // 3. 변수로 렌더링 ReactDOM.render(img, document.getElementById('app'));
- 삼항연산자(The Ternary Operator) - x ? y : z
const img = <img src={pics[coinToss() === 'heads' ? 'kitty' : 'doggy']} />; // combine variables + if statements ReactDOM.render(img, document.getElementById('app'));
- && 검증법 - true일때만 렌더링을 원하는 경우 사용.
const tasty = ( <ul> <li>Applesauce</li> { age > 15 && <li>Brussels Sprouts</li> } // if age <= 15, nothing is rendered.. { age > 20 && <li>Oysters</li> } { age > 25 && <li>Grappa</li> } </ul> );
5) .map() 메소드를 활용한 렌더링
import React from 'react'; import ReactDOM from 'react-dom'; const people = ['Rowe', 'Prevost', 'Gare']; const peopleLis = people.map(person => <li>{person}</li>); ReactDOM.render(<ul>{peopleLis}</ul>, document.getElementById('app')) // Rowe // Prevost // Gare
6) key(for list) - id와 유사. React에서 추적이 필요한 <li>에 지정한다. (필요조건 참고)
-
The list-items have memory from one render to the next. For instance, when a to-do list renders, each item must “remember” whether it was checked off. The items shouldn’t get amnesia when they render.
-
A list’s order might be shuffled. For instance, a list of search results might be shuffled from one render to the next.
<ul> <li key="li-01">Example1</li> <li key="li-02">Example2</li> </ul>
7) createElement()
import React from 'react'; const beforeJSX = <div>i am div</div>; const afterJSX = React.createElement('div', null, 'i am div');
.createElement(type, [props], [...children]) 문법을 참고하자.
🤔 총평
createElement()는 React.js에서 사용하는 Component의 일종이라고 한다. (메소드와 유사하다고 추정)
다음 게시글에는 Component 공부내용을 정리하도록 하겠다.
반응형'Front-End(Web) > React - 프레임워크(React, Next)' 카테고리의 다른 글
[React.js] Lifecycle (0) 2020.11.27 [React.js] State (0) 2020.11.26 [React.js] Props (0) 2020.11.26 [React.js] Components Interact, Import/Export (0) 2020.11.26 [React.js] Component 기본 (0) 2020.11.24 -