React (1)

리액트 REACT : 자바스크립트 라이브러리로, 사용자 인터페이스 (UI)를 구축하기 위해 사용(페이스북 제공)

특징
1. 컴포넌트 기반 구조

• 독립적이고, 재사용 가능한 코드 조각으로, 여러 컴포넌트를 조합하여 크고, 복잡한 사용자 인터페이스를 만들 수 있다.

2. 가상 DOM(Virtual DOM)

• 상태가 변경되면 실제 DOM에 변경을 적용하기 전에 가상DOM에 먼저 적용하고 나서 이를 실제 DOM과 변경DOM을 비교해서 필요한 부분만 업데이트 하는 방식 -> 성능이 향상됨

3. JSX(JavaScript Xml)
   JSX는 자바스크립트와 HTML을 결합한 문법으로, UI를 정의할 때 직관적이고 읽기 쉽게 만들어 줌.
   JSX는 브라우저가 이해할 수 있는 자바스크립트 코드로 변환을 해줌.

<h1>Hello, world!<h1> 이모양을 만든다면?

JS 
const h1= document.createElement("h1");
h1.innerText = "Hello, world!";
body.append(h1);

JSX
const element = <h1>Hello, world!</h1>;
return(
         {element}
)

npm : node package manager (노드패키지 관리자)
yarn : npm의 성능을 보완하기 위해 나온 것

<리액트 설치 방법>
node.js 설치하기 > 원하는 곳에 폴더 생성 > 폴더에서 마우스 우클릭 후 터미널 열기 >
터미널에서 아래 내용 작성하면 됨

• 설치가 잘되었는지 보는 방법
  

• yarn 설치하기
  

• 프로젝트 생성하기
  

Happy Hacking 문구가 뜨면 완료가 된 것임!

• vs코드에서 생성한 프로젝트 폴더 열기
  
  
• vs코드에서 터미널 열고 터미널 git bash로 변경하기
  

-변경 후 프로젝트 실행 시키기

** 리액트는 기본 포트번호를 3000을 사용하고 있음

-> 화면에 보여주고 싶은 모든 코드는 app.js에서 보여지고 있음.
app.js return 구문에 작성되어있음을 알 수 있음

![](https://velog.velcdn.com/images/minni_/post/c29338c6-f08b-4392-966e-9d8f82c0766f/image.png)

▶ 앱 컴포넌트

▶ app.js에서 App이라는 함수를 가져온다는(불러온다는) 뜻
: 리액트에서 컴포넌트를 부르는 방식

▶ root라는 id를 가진 dom의 요소를 root라고 부른다는 의미
root는 index.html파일 안에 있는 root라는 id를 가진 요소를 뜻한다.

const root = ReactDOM.createRoot(document.getElementById('root'));
// 'root'라는 id를 가진 DOM요소를 찾아 그것을 루트로 사용하도록 설정함 (public 폴더의 index.html에 존재)
root.render( // 루트를 통해 React 요소를 렌더링함. -> 즉, <App /> 컴포넌트가 렌더링되어 DOM에 삽입됨.
  <React.StrictMode>
    <App />
  </React.StrictMode>

  // <APP />만 있어도 되는데  <React.StrictMode> 태그로 감싸진 이유?
  // 성능향상을 위해 감싸져있는 것! 즉, StrictMode를 리액트에서 사용하겠다는 뜻(성능향상을 위해)
  // : 개발 중에 일부 문제를 검사하고 경고를 표시하여 개발자에게 앱의 잠재적인 문제를 알려줌.
);

▶ 따라서 app안에 작성된 부분이 화면에 랜더링 되고 있다는 것을 한번 더 확인할 수 있음!

이 모든 내용이 즉, 아래 화면이다.

• jsx 에서 주석 => {/**/} ctrl+/ ▶ (주석 자동완성)
• 터미널 열고 서버 끄고 켜는 방법
  // 터미널 ctrl + shift + ` 로 열고
  // 터미널에서 yarn start 서버 켜기
  // 터미널에서 ctrl + c 서버 끄기