[React] 리액트란? | JSX 문법 | Virtual DOM | Componenet

sm·2023년 1월 12일
0

Web

목록 보기
17/24

React JS: 반응이 있는 자바스크립트

  • META가 관리하는 프레임워크
  • JS 보다 편리하게 사용할 수 있는 도구
  • 왜 배워야 하는가?: 생태계 - 수요 ↑
  • stack overflow - 개발자 커뮤니티
    • 2022년 기준 개발자 설문조사 → JS Framework : 1. Node > 2. React(front)
    • 프론트: vue도 뜨고 있다.
    • wappalyzer로 확인 가능
  • Virtual DOM 개념
    • 효율적인 접근을 위해
    • 네이버 클릭시 모든 페이지가 새로고침됨 ⇒ 비효율적
    • 변화해야 하는 부분만 새로 그려줘서 매우 부드럽고 빠르다.
      • 예시) 인스타그램, 최근 쇼핑사이트, 스트리밍 사이트
  • React(페이스북이 유지보수, 다양한 방법론) / Angular(구글) / Vue.js(깔끔하고 쉽다. 1인이 개발)
    • 리액트를 잘 하면 vue는 쉬울 것이다.

React - 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

jsx
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
//<script **defer**="./index.js”r> 옵션

JSX(Javascript XML)문법: JS코드 내부에 html 코드를 쓸 수 있게 만들어준다.

  • JS에 XML을 추가한 문법
  • 보통 리액트에서만 사용
  • HTML 문서 구조를 JS에서도 사용 가능.
  • 따라서 JS 내부에서도 HTML을 짜듯 코드 구성이 가능해진다.
  • 이를 읽기 위해서는 Babel 이라는 컴파일러(번역기)가 필요

Babel

https://babeljs.io/

  • JS 컴파일러
  • 현재 JS 문법은 ES6(2015)
  • ES6과 ES5 문법의 충돌이 잦아서 ES6문법을 ES5문법으로 변환해주던 기능 ⇒ 다른 추가적인 언어들에 대한 컴파일러 역할 (대표적인 것이 REACT)

Create-react-app 명령어

→ 자동으로 최신 버전으로 리액트를 개발할 수 있는 환경

https://ko.reactjs.org/docs/create-a-new-react-app.html#create-react-app

//Terminal에 입력
npx create-react-app my-app
cd my-app
npm start

Terminal ⇒ 빨강, 초록, 파랑은 읽어라

NPX(실행시키고 사라진다. - 캐싱) / NPM(컴퓨터에 남는다.)

  • NPM: 노드 패키지 관리 도구
  • NPX: Node Package eXcute: 노드 실행을 위한 명령어
  • npm 과는 달리 최신 버전의 패키지를 임시로 설치해서 실행하는 용도- 호환이슈x
  • 한번만 임시로 설치해서 해당 Node를 실행시키고 사라진다.
  • 따라서 npm에 대한 의존성이 없어서 다른 node.js 버전으로 이동도 가능하고 좀 더 자유로운 코드 공유가 가능하다.
  • 한번만 쓰고 마는 코드 Create-react-app 같은 경우 유용하다. 한번만 설치하고 할 일이 끝나면 삭제되어 사라진다.

프로젝트 폴더 살펴보기 - 폴더는 소문자로 하는 것이 좋다. 안되면 package.json 다시 저장

	//package.json
		"start": "react-scripts start", //앱 구동
    "build": "react-scripts build", //
    "test": "react-scripts test",
    "eject": "react-scripts eject"

public/index.html - 하나의 html 파일

src/index.js

<React.StrictMode> : 코드를 무조건 2번 실행시켜줌.

: 자바스크립트 코드 덩어리 - html, js코드가 들어있는 것을 이렇게 사용 가능

  • 실제 우리는 App.js 코드 내부에서 개발을 하게 됨.
  • 리액트는 코드 변화가 생기면 바로 바로 반영

JSX

  • 기존에는 HTML 요소와 JS요소를 따로 나누어서 사용해야 했음. 그림과 기능을 따로 했어야 했다.
  • JS 문법 안에 HTML을 쓸 수 있게하여 더 직관적이고 편리하게 코딩 가능
  • HTML 요소는 return ( );안에 그대로 써주면 되고, JS를 쓰고 싶으면 그 안에 { }안에 써주면 된다.
  • JSX 문법을 사용하지만 브라우저는 JS를 받음 - 바벨이 JSX를 순수JS로 번역하여 브라우저에 전달

JSX 문법

  • 기존 Dom 요소에 class를 부여할 때 쓰던 class는 className이라고 써야 한다! (바벨이 헷갈림)
  • JS에서 class는 JS의 클래스 타입을 의미하므로 구분해줘야 한다.

⇒ 편리한 데이터 바인딩

인라인 스타일 적용하기

→ 인라인 스타일도 { } 로 전달해야 한다.

  • 단 객체 타입으로 전달해야 한다. ⇒ 중괄호가 2개

kebab-case to camelCase

: JS로 번역할 때 -는 빼기를 의미하니 ,바벨이 헷갈리니까

이벤트 핸들러 적용

  • onclick: JS에서는 DOM요소에 대한 이벤트를 컨트롤 하는 방법으로 DOM 요소에 onclick을 걸거나 addEventLister를 사용했음
  • 리액트에선 onClick 사용 → 익명함수를 정의해서 사용하는게 안전
function App() {
  function printConsole() {
    console.log('콘솔 출력');
  }

  return (
    <div className="App">
      <span onClick={printConsole()}>클릭</span>
		//printConsole 하면 바로 찍히지 않음
		//console은 2번 찍힘
    </div>
  );
}

-함수 정의를 하지 않고 사용하면 에러가 뜬다. 

function App() {
  const Styles = {marginTop: "32px", backgroundColor: "skyblue"};
  const helloStr = "Hello, first exercise";

  return (
    <div className="App">
      <div style={Styles} onClick={()=> {
        alert("클릭됨")
      }}>{helloStr}</div>
    </div>
  );
}

Webpack

결과적으로 배포할 때 브라우저가 알아들을 수 있는 4가지로 변환 - js, css, jpg, png

  • 의존성이 있는 모듈을 모아서 하나의 파일로 만들어 주는 역할
프로젝트 폴더에 가서 빌드
npm run build
//build/index.html => 띄어쓰기, 엔터가 다 사라짐. 그건 사람을 위한 것
// 순수한 자바스크립트로 압축 

npx serve -s build
// 필요없는 모듈은 꺼내서 용량이 확연히 준다. 기능은 같다.

Component

  • 리액트의 핵심 개념
  • Virtual DOM의 핵심
  • React는 컴포넌트 단위로 페이지 새로 고침이 가능하여 리소스 절약이 가능하고 사용자에게 부드럽고 빠른 경험을 제공한다.
  • 독립적으로 구성하여 재사용이 편리하다.
  • 데이터는 속성(props)로 받고, 상태(state)에 따라 view를 변화한다.
  • 예시: 하나의 컴포넌트만 만들고 변화되는 데이터만 props로 전달하여 재사용하면 됨

Error 발생!

  • 컴포넌트는 JS에서 클래스를 기반으로 만들어 졌기 때문에 PascalCase를 사용했었음. camelCase를 쓰는 함수 또는 변수와 구분하기 위해 여전히 PascalCase를 사용한다.

Component의 종류

  • 클래스형 컴포넌트 vs 함수형 컴포넌트

  1. 클래스형 컴포넌트 - 요즘은 안쓰지만, 어떻게 생겼는지, 무엇인지는 알아야 한다.

    • 최초로 사용되었던 컴포넌트
    • 컴포넌트 자체가 JS의 클래스와 유사하기 때문에 자연스럽게 사용
    • 리액트의 장점 모두 활용 가능. 그러나 메모리 자원도 더 먹고 느림.
    • render 라는 함수를 사용해야만 그릴 수 있다. 최근에는 함수형 컴포넌트(가볍고 쉬운)에 밀렸다.
    1. 함수형 컴포넌트 - 리액트 16.8 v 부터~
    • JS에서 익숙하게 사용하였던 함수를 컴포넌트화
    • 구조 자체가 클래스에 비해 단순하여 코드도 단순하고 빠르게 배울 수 있다.
    • 메모리도 덜 먹고 빠르다. - render 함수가 빠짐, 클래스에 필요한 메모리 불필요
    • 다만 리액트의 중요 기능 사용이 불가능하여 제한적으로 사용 → 최근에는 Hooks라는 기능의 도입으로 같은 역할 수행 가능!
    import logo from "./logo.svg";
import "./App.css";
//import MainHeader from "./components/MainHeader";

function App() {
  function MainHeader() {
    return (
      <h1>함수형 내부 정의</h1>
    )
  }
  

  return (
    <div className="App">
      <MainHeader/>
    </div>
  );
}

export default App;

    import는 src 안에 있는 것만 가능. public 폴더 참조 불가 src 폴더 안의 이미지만 참조 가능

    • public 폴더의 이미지를 참조하려면?
      • src=”/” ⇒ public 폴더의 위치와 같다.
      1. js 적으로 import
      2. public 이용해서 갖다 쓰기
profile
sm
📝
이전 포스트

221203

다음 포스트

[React] State와 useState

0개의 댓글