React란?

React는 웹 프레임워크(소프트웨어 개발에서 개발을 위해 미리 정의된 구조나 틀)로, JS 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
우리가 흔히 아는 facebook의 meta에서 만들었고 현재 많이 활용되고 있는 인기 있는 라이브러리다.
물론 React를 사용하지 않아도, html과 css, JS를 이용해서 웹을 만들 수 있지만 React를 이용해 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문에 많이 이용한다.

React 공부를 위한 참고 자료
https://ko.legacy.reactjs.org/ <- 리액트 공식 문서
https://ko.legacy.reactjs.org/tutorial/tutorial.html <- 리액트 자습서, 실전파에게 추천
https://ko.legacy.reactjs.org/docs/hello-world.html <- 단계별 가이드, 이론파에게 추천
https://www.youtube.com/playlist?list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy <- 코딩애플 리액트 강의

기본 React세팅은 이렇다.

JSX

html

<div id="root"></div>

JS

import React, { useState } from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";

const App = () => {
  return (
    <div>/*또는 <>*/
    /**********************************************************
    기본적으로 코드는 이러한데
    여기다가 바로 html태그를 바로 작성하면 된다. 이것이 바로 React의 JSX문법이다.
    **********************************************************/
    <div>hello world!</div>
    /**********************************************************
    여기다가 작성하면 이 App이라는 함수의 return값을
    아래있는 코드
    (ReactDOM.render(<App />, document.getElementById("root"));)
    "root"라는 id를 가진 태그에게 랜더링 해준다는 뜻이다.
    
    그렇게 하면 html코드의 
    <div id="root"></div>안에 들어가서
    <div id="root">
    	<div>
        	<div>hello world!</div>
        </div>
    </div>
    이런 형식의 엘리먼트가 랜더링 된다.
    **********************************************************/
    </div>/*또는 </>*/
  );
};
ReactDOM.render(<App />, document.getElementById("root"));

그럼 JSX의 CSS 작업은 어떻게 하나?

편의를 위해 App함수만 가져오겠다.

const App = () => {
  return (
    <>
    	<div>
    		hello world!
    	</div>
    </>
  );
};

여기서 hello world라는 문구에게 css작업을 하고 싶다면 두 가지 방법을 사용할 수 있다.

ver 1

class나 id를 추가해서 css파일을 적용시키는 방법이다.
html

<div class="hello">hello world!</div>

css

hello{
	color : red;
    text-weight : bold;
}

하지만 기본적으로 JSX는 JS문법을 기반으로 html코딩을 하는 것이기 때문에 작성방법에 약간의 차이가 존재한다.

• class는 JS에 키워드로 존재하기 때문에 className을 이용한다.

const App = () => {
  return (
    <>
    	<div className = "hello">
    		hello world!
    	</div>
    </>
  );
};

ver 2

두번째 방법은 태그에서 style속성을 적용하는 것이다.
html

<div style="color : red; text-weight : bold;">hello world!</div>

이 문법도 JS문법에 맞춰야 하기에 다른 형식으로 작성한다.

• style = {객체 형식으로 작성한 style}
• JS에서 text-weight는 text -(마이너스) weight로 작동한다. => camelCase라는 작성관습에 따라 textWeight로 작성

const App = () => {
  return (
    <>
    	<div style = {{
    		color : red,
    		textWeight : bold
    	}}>
    		hello world!
    	</div>
    </>
  );
};

이렇게 작성해주면 된다.

데이터 바인딩

React를 사용하면 좋은 점 중에 하나가 데이터 바인딩이 쉬워진다는 것이다. 데이터 바인딩은 쉽게 말해 데이터를 HTML에 꽂아넣는 것인데 전통적인 JS 데이터 바인딩은 이렇게 했다.
html

<div class="hello"></div>

javascript

let hi = "hello world!";

document.getElementById("hello").innerHTML = hi

하지만 React에서는 이러한 과정이 너무 쉽다. JSX문법을 이용하면 되는데
데이터를 집어넣고 싶은 곳에 {}중괄호를 열어주기만 하면 된다.

const App = () => {

  let hi = "hello world!";
    
  return (
    <>
    	<div style ={
    		color : red,
    		textWeight : bold
    	}>
    		{ hi } /*<===== 이런 식으로 말이다.*/
    	</div>
    </>
  );
};

이런 식으로 말이다. 훨씬 직관적이고 코드도 간결해진다.
함수명 같은 것도 집어넣을 수 있다.

const App = () => {

  const 함수 = () => {
  	return 100
  }/*100을 뱉어내는 함수*/
    
  return (
    <>
    	<div style ={
    		color : red,
    		textWeight : bold
    	}>
    		{ 함수() } /*그럼 함수를 실행한 곳에 100이 남게 되고 100으로 표시된다.*/
    	</div>
    </>
  );
};

이 {}중괄호는 어느 곳에서나 들어갈 수 있다. className = {변수명}, style = {변수명} 이런 형식도 가능하다.