<study> React

React 란 ?
: 사용자 인터페이스를 구축하기 위한 효율적이고 유연한 js 라이브러리
컴포넌트를 이용해서 복잡한 UI를 구성하도록 돕는다
render() 함수를 통해 화면에서 보고자하는 내용을 반환

• If a JSX expression takes up more than one line, then you must wrap the multi-line JSX expression in parentheses. (무조건 다른걸로 하나뿐인걸로)

const theExample = (

 <h1>
   Click me!
 </h1>

);

• a JSX expression must have exactly one outermost element.

const paragraphs = (
<div id="i-am-the-outermost-element">

<p>I am a paragraph.</p>
<p>I, too, am a paragraph.</p>

</div>
);

• ReactDOM‘s methods: ReactDOM.render().
  ReactDOM.render()‘s first argument should be a JSX expression, and it will be rendered to the screen. (첫번째 = 화면에 나타나는 변수명(""없이), 두번째=지정ID)

var myList = "Hello";

ReactDOM.render(myList, document.getElementById('app'));

• In JSX, you can’t use the word class! You have to use className instead:

< h 1 > className="big">Hey < / h 1 >

• In JSX, you have to include the slash. If you write a self-closing tag in JSX and forget the slash, you will raise an error.

< br / > < img / >

• Any code in between the tags of a JSX element will be read as JSX, not as regular JavaScript! JSX doesn’t add numbers (2+3이라고 계산해주지 않음)- it reads them as text, just like HTML.

ReactDOM.render(< h1 >2+3< /h1 >,
document.getElementById('app')
);

===== 2+3 으로 출력

Everything inside of the curly braces will be treated as regular JavaScript.

ReactDOM.render(< h1 >{ 2+3 }< /h1 >,
document.getElementById('app')
);

===== 5로 출력

var name = "claire";

ReactDOM.render(< h1 >{name}< /h1 >,
document.getElementById('app')
);

===== 태그안에서 변수 name을 불러올때 { }사용. claire로 출력

• the word on, plus the type of event that you’re listening for.
  (더 많은 이벤트: https://reactjs.org/docs/events.html#supported-events)

function myFunc() {
alert('Make myFunc the pFunc... omg that was horrible i am so sorry');
}

< img onClick={ myFunc } / >
== 클릭시 function

• JSX 조건문

const headline = (
< h1 >
{ age >= drinkingAge ? 'Buy Drink' : 'Do Teen Stuff' }
< /h1 >
);

=== 맞으면 < h1 > Buy Drink < /h1 >, 아니면 < h1 > Do Teen Stuff < /h1 >

function coinToss () {
return Math.random() < 0.5 ? 'heads' : 'tails';
}

const pics = {kitty: url, doggy: url2 };

const img = <img src={pics[coinToss() === 'heads' ? 'kitty' : 'doggy']} />;

ReactDOM.render(img, document.getElementById('app'));

==== pics의 array[ ] 호출 ' ' . 위 function coinToss가 heads일 경우 kitty 이미지 출력

• If you want to create a list of JSX elements, then .map() is often your best bet.

const people = ['Rowe', 'Prevost', 'Gare'];

const peopleLis = people.map(
person => < li >{person}< /li >
);

ReactDOM.render(< ul >{peopleLis}< /ul >,document.getElementById('app'));

<출력>
Rowe
Prevost
Gare

• React.createElement()
  같은 의미

const h1 = < h1 >Hello world< /h1 >;

const h1 = React.createElement(
"h1",
null,
"Hello, world"
);

import React from 'react';
import ReactDOM from 'react-dom';

• class + class이름(UpperCamelCase로 작성) + extends React.Component {}

• method = render() {}

class MyComponentClass extends React.Component {
render() {
return < h1 >Hello world< /h1 >;
}
}

• ReactDOM.render(< class이름 / >)

ReactDOM.render(
< MyComponentClass / >,
document.getElementById('app')
)