230227 숙달을 위한 메모: React 기본 개념 편

반응형

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

---

JS, 플젝을 지나 오늘부터 시작되는 React.
사실 예전에 독학을 할 때 클론코딩으로 접해본 경험이 있다.
당시 JS를 지금보다 더 몰랐기 때문에 지금 생각해보면 표면적으로만 아하! 했었 던것 같다.

 

---

 

0. 개념

전 Facebook, 현 Meta에서 2011년에 만든 프론트엔드 라이브러리 (프레임워크)이다.
이를 통해 페이스북, 인스타그램, 넷플릭스 모두 이 React 로 만들어졌다고 한다.

React는 오픈소스 프로젝트이기 때문에, 아래 링크를 통해 소스를 확인해 볼 수 있다.

오픈소스바로가기

GitHub - facebook/react: A declarative, efficient, and flexible JavaScript library for building user interfaces.

현재는 jQery보다도 훨씬 압도적으로 많이 사용되고 이를 통한 프로덕트 퍼블리싱또한 압도적이다.

 

---

1. 작동원리

1 - 1. SPA(Single Page Application)

예전에는 새로운 창으로 갈때마다 새로운 html, css를 서버에서 다운받아서 이를 보여주는 방식이었으나,
SPA가 등장하고 나서부터는 과거의 비효율적인 정적페이지의 방식은 점차 줄어들었다.

SPA란, 사실은 하나의 html 파일만 보여주면서,
내부의 요소는 모두 자바스크립트를 활용해서 변경시키는 방식으로, 페이지가 변경될 때 마다
무조건 새롭게 html, css 파일을 표시해야했던 예전 방식보다 훨씬 효율적!

1 - 2. Virtual Dom with Diff Algorithm

Diff Algorithm을 통해 실제로 페이지의 어떤 부분이 달라졌는지 확인하고 그 부분만
바꿔지도록 도와주는 알고리즘인데, 이 친구와 함께 React는 Virtual Dom으로 동작한다.
더 자세히 적어보자면,
DOM 은 html 문서를 통해서 생성된, 자바스크립트를 통해서 조작 가능한 요소들을 뜻한다.
한마디로 브라우저가 이해하는 Element의 원형이다 라고 생각하면 된다.
(쉽게 말하면 브라우저 개발자 도구에서 보는 그런 요소들을 생각하면 된다. 엄밀히 말하면 조금 다르다고 한다)

React 는 가상으로 html 요소들을 생성하고 (가짜 DOM), 현재 화면에 표시되는 html 요소들 (진짜 DOM) 과 비교해,
달라진 부분만 다시 그리는 방식으로 렌더를 진행하는 원리인 것.

요소가 달라질 때마다 새롭게 화면을 다 다시 그리는 것이 아니라,

달라진 부분만 알아서 React 가 다시 그려주는 것!

---

2.  component

React 는 component 라는 것을 작성해서, 조합하는 방식으로 코딩을 진행한다.

component 는 하나의 html 페이지에서 요소들을 잘게 나눈 것이라고 생각하면 된다.
이런 방식으로 쪼개서 사용했을 때 장점은, 팀으로 하나의 페이지를 작성할 때 요소 별로 나눠서 작업가능 + 복잡한 페이지의 코드를 조금 더 직관적으로 볼 수 있다.

최근에는 함수형을 쓰는 것이 트렌드이고, 코드 자체도 클래스형을 쓸 때보다 훨씬 짧아지기 때문에
함수형 위주로 공부를 해볼 예정이다.(물론 클래스도 쓸 줄은 알아야한다!)

 

함수형 예시

import React from 'react';

function Hello({ color, name, number }) {
  return (
    <div style={{ color }}>
      Hello! {name}
    </div>
  );
}

export default Hello;

클래스형 예시

import React, { Component } from 'react';

class Hello extends Component {
  render() {
    const { color, name, number } = this.props;
    return (
      <div style={{ color }}>
        Hello!! {name}
      </div>
    );
  }
}

export default Hello;

 

---

3. JSX (Javascript XML)

JSX 는 react 에서 쓰이는 자바스크립트 확장 문법으로,  html 을 자바스크립트 기반으로 작성할 수 있도록 하는 문법이다.

지금까지는 자바스크립트 코드는 js 파일이나 <script> 태그 안에 쓰고, html 코드는 html 파일 안에 써왔으나,
react를 배우면서는 js 파일 안에 자바스크립트와 html 코드를 모두 쓰게 되고, 쓸 수 있다.

위 예시에서 나온

    return (
      <div style={{ color }}>
        Hello!! {name}
      </div>
    );

return()의 부분이 JSX인 것.

JSX를 사용하기 위해선 주의 해야할 사항들이 있는데,

1. 반드시 전체를 감싸는 부모 태그가 하나 있어야 한다. (빈 태그로 감싸도 됨)

예시

    return (
      <div style={{ color }}>
        Hello!! {name}
      </div>
    );
    
    //OR 빈 태그 가능
    
    return (
      <> Hello!! {name} </>
    );

 

2. JSX내부에서, 외부 자바스크립트 부분에서 선언한 변수나 함수를 쓸 때는 {} 기호를 쓴다.

예시

function Hello() {
	const name = "누구누구"

  return (
    <div>{name} Hello</div>
  )
}

3. jsx 내부에서, html 태그 요소에 class 를 주고 싶을 때는, className 을 쓴다.

예시

import './App.css';

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

export default App;

4. 주석은 {/* 주석내용 */} 형태로 사용할 수 있다.

예시

  return (
		{/* 주석내용 */}
    <>Hello</>
  )

---

4. camelCase

React에서 자바스크립트를 사용하면서, 변수나 함수를 만들 때는

첫번째 단어는 소문자, 두번째 단어부터는 대문자가 되도록 이름을 지어야 한다.

(자바스크립트와 동일)

ex) hello_world → helloWorld

ex) count_down → countDown

실제로 react 내부 함수 또는 변수들도 모두 해당 규칙을 따라 지어진 것을 확인 할 수 있다.

💡 주의) react component 명(.jsx 파일명)은 무조건 대문자로 시작해야한다는 점을 인지하기

---

다음 글은 리액트 프로젝트 실행해 보기와 props와 useState!