리액트 설치 방법과 실행 방법입니다.

오늘은 리액트를 드디어 하네요.

학원에서 PHP로 데이터베이스로 주고 받는 것부터 해야 리액트가 쉽다고 3달이 되어서야 하네요.

 

리액트가 나오게 된 이유

리액트(React)는 페이스북(Facebook)에서 개발된 자바스크립트 라이브러리입니다.

 

1. 가상 돔(Virtual DOM): 리액트는 가상 돔(Virtual DOM) 개념을 도입하여 성능을 최적화하였습니다.

2. 컴포넌트 기반 접근 방식: 리액트는 컴포넌트 기반 아키텍처를 채택하여 개발자들이 재사용 가능한 UI 컴포넌트를 작성할 수 있게 합니다.

3. 단방향 데이터 흐름: 리액트는 단방향 데이터 흐름을 강조합니다. 데이터는 항상 부모 컴포넌트에서 자식 컴포넌트로 흐르며, 자식 컴포넌트에서는 직접 데이터를 변경할 수 없습니다.

4. 재렌더링 최적화: 리액트는 가상 돔과 함께 사용되는 재렌더링 최적화 기능을 제공합니다.

5. 커뮤니티와 생태계: 리액트는 강력한 개발자 커뮤니티와 다양한 라이브러리, 도구, 패키지 등을 포함합니다.

 

리액트 설치 방법

1. 비쥬얼 스튜디오를 다운로드 합니다.

2. node.js를 설치합니다.(npm도 자동으로 설치가 됩니다.)

3. node.js가 설치 되었는지 확인을 해야합니다.

4. cmd를 키고 node -v를 칩니다. 버전이 나오면 설치가 된겁니다.

5. cmd에 "npx create-react-app 폴더이름"을 적어서 리액트를 설치합니다.

6. 설치된 파일 중 package.json에서 "scripts"에 적힌 대로 리액트를 실행 및 확인할 수가 있습니다.

- "start"는 리액트를 실행하는 방법입니다. : npm start

- "build"는 리액트 네이티브를 통해서 앱을 만드는데 활용됩니다.

 

리액트 기본 문법 공부하기~

1.리액트 사용 방법 : https://ko.legacy.reactjs.org/
2.리액트 기초 문법 : https://ko.legacy.reactjs.org/docs/hello-world.html

 

리액트 깃허브에 올려보자

git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/xlsak5/react2023-1.git
git push -u origin main

 

리액트 깃허브에 올리고 나서부터 깃허브에 올리기

git add .
git commit -m "내용"
git push -u origin main

 

리액트 간단한 코드 입력해보자

1.Hello World 출력하기

import React from "react";
import ReactDOM from "react-dom/client";

// ReactDOM.createRoot() : 최신 문법
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<h1>HELLO WORLD</h1>);

 

 

2.JSX

JSX(JavaScript XML)는 JavaScript에서 XML과 비슷한 문법을 사용하여 UI(사용자 인터페이스)를 작성하기 위한 확장 문법입니다. React와 같은 JavaScript 라이브러리나 프레임워크에서 주로 사용됩니다.

const name = "AnGyonam";
// 자바스크립트 + 태그 = JSX 
const hello = <h1>hellow {name}</h1>;

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(hello);

 

3.랜더링

function clock(){
// 태그가 2개 이상일떄는 (); 안에서 작성
// 부모가 있어야 함.
const element =(
    <div>
      <div>hello, AnGyonam</div>
      <h2>지금은 {new Date().toLocaleDateString()}입니다.</h2>
    </div>
);

ReactDOM.render(element, document.getElementById("root"));
}
export default clock;

 

..............