react 공부 순서
1.react
2.jsx
3.component
4.state
5.props
6.setState
7.lifeCycle
8.CRA - create react app
9.CSR - client side rendering
10.SSR - server side rendering
11.SPA - single page app

React

자바스크립트의 라이브러리.
UI(user interface)를 만들기 위해 사용되고 페이스북에서 만들었다.

리액트가 생겨난 배경과 사용하는 이유

• 웹의 규모가 커지고 복잡해져서 만들어짐.
• 분업화가 쉽다.
• JS 탈웹.
• 생태계가 잘 되어있다.
  (사용하는 개발자가 많다. 즉, 정보가 많다.)

JSX

리액트에서는 JSX라는 문법을 사용한다.

const 변수 = <h1>안녕, 리액트!</h1> 

위의 문법은 HTML도 자바스크립트도 아니다.
이런 문법이 JSX이고, 자바스크립트를 확장한 문법이다.

function react(name){
	if(name){
      return <h1>안녕 {name}!</h1>;
       }
}

위의 예제처럼 자바스크립트의 function함수도 사용할 수 있고, if문도 사용할 수 있다.
그리고 ES6의 arrow function도 사용할 수 있고, for문도 사용할 수 있다.
다시 말해 마크업도 가능하고, 자바스크립트의 모든 기능을 사용할 수 있다!

예제를 조금 더 들어본다면,

const element = <img src={name.url}></img>;

중괄호를 사용하여 태그 속성의 값으로 자바스크립트 표현식을 넣을 수도 있다.

예제로 img태그를 사용하였는 데, 조금 다른 점이 있다.
HTML에서 img태그를 사용할 때는 닫는 태그를 사용하지 않아도 큰 지장이없지만, JSX에서는 꼭 닫아주어야 한다.

<img></img>

//혹은

<img />

위의 두 예제처럼 태그를 닫아줄 수 있다.

그리고 문자열을 사용할 때 자바스크립트에서는 ""따옴표로 감싸주어야했지만 JSX에서는 사용하지않아도 된다.

다음 순서인 component를 공부하며 JSX에 더욱 알아가보도록 하자.

리액트를 공부하며 알아두어야 할 것 (메모!)

//DOM 과 virtual DOM
//- DOM : document object model
//- virtual Dom : 가상의 돔.

//react를 사용하기 위해 필요한 
//1. node.js 
//2. npm : node package manager
//3. CRA 

//package.json 안의 "dependencies"에는 본인이 설치한 패키지들이 나열된다.
//.gitignore 에는 git에 올리지 않을 것들을 셋팅한다.