📃 리액트(React) 기본 정의

생각해보니 프론트엔드 개발과 관련된 여러가지 용어에 대해
대략적인 뜻과 개념은 알고있지만, 생각보다 꽤나 추상적으로 알고있었다.
이에, React를 실제 다뤄보기 시작함과 동시에
기본적인 용어의 개념과 뜻을 함께 정리해보고자 한다.

---

리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

미리 정한 동작을 수행하는 코드의 묶음 의미하는 함수(Function)가
모인 것이 모듈(Module), 이런 모듈의 집합을 패키지(Package)라고
부르며, 라이브러리리(Library)는 이같은 패키지의 모임으로 패키지보다는
조금 더 포괄적인 의미를 내포하지만 혼용해서 쓰이기도 한다.

---

리액트(React)에서는 JSX 문법을 사용해서 리액트 요소를 만들어 주고,
이 요소를 문서객체모델(DOM)에 렌더링 시킨다는 특징이 있다.

DOM(Document Object Model)이란, 넓은 의미로 웹 브라우저가
HTML 페이지를 인식하는 방식을 의미한다.

우리는 이러한 브라우저와 관련된 객체들의 집합을,
브라우저 객체 모델(BOM: Browser Object Model)이라고 부르고
DOM은 이 BOM 중에 하나라고 볼 수 있다.

---

JSX는 HTML을 품은 자바스크립트로, 자바스크립트를 확장한 문법이다.
우리는 이를 이용해 만든 리액트 요소를 통해, 직접 뷰를 그려주게 된다.
결국 뷰를 그리는 요소들 자바스크립트 파일 속에서 만날 수 있게 된다.

• JSX는 다음과 같은 규칙이 있다.

  	1. 태그는 꼭 닫아주기
  	2. 무조건 1개의 엘리먼트를 반환하기
  	3. JSX에서 javascript 값을 가져오려면? 
  	4. class 대신 className!
  	5. 인라인으로 style 주기

---

리액트를 다루기 시작하다보니 기존
html, css, javascript에서 다루는 문법들이 조금은 헷갈리기 시작했다.
짧게나마 정리해보려고 한다.

<div class="main" style="color: blue">
  HTML태그 내에 css 사용법
</div>

---

<div class="main" id="UseEvent" onclick="changeMyColor(UseEvent)">
  HTML태그 내에 event 사용법
</div>

function changeMyColor(id) {
    var el = document.getElementById(id);
    el.style.color = "blue";
}

---

.main {
  color: #fff;
  font-size: 17px;
  font-weight: 700; /* 두껍게 */
  margin-right: 20px;
}

---

    function changeBackgorund(index) {
      const bg = document.getElementsByClassName("todo-card")[index];
      bg.style.backgroundColor = "gray"
      console.log(event)
    }

    const btns = document.getElementsByTagName("button");
    for (let i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", () => (changeBackgorund(i)))
    }

---

function App() {
  const styles = {
    border: "1px solid gray",
    margin: "30px auto",
    padding: "20px",
    width: "300px"
    
  }
  return (
    <div className="App">
      <div style={styles}>
        <p style={{color: "green", fontSize: "40px"}}>안녕하세요!</p>
        <hr/>
        <p style={{textAlign: 'left'}}>이름을 입력해주세요.</p>
        <input type="text" />
      </div>
    </div>
  );
}