[React] 자주 언급되는 내용들 한 번 정리

* 밸로퍼트와 함께하는 모던 리액트 참고

https://react.vlpt.us/

벨로퍼트와 함께하는 모던 리액트 · GitBook

 

○ JSX : 리액트에서 생김새를 정의할 때 사용하는 문법 (https://react.vlpt.us/basic/04-jsx.html)

- 특징 1 : 태그는 꼭 닫혀있어야 함

- 특징 2 : 두 개 이상의 태그는 무조건 하나의 태그로 감싸야 함

- 특징 3 : 자바스크립트 변수를 보여줘야 할 때는 {}로 감싸야 함

 

 

○ props : properties의 줄임말, 어떤 값을 컴포넌트에 전달 시 props 이용

- 특징 1 : 컴포넌트에게 전달되는 props는 파라미터를 통해 조회 할 수 있음

- 특징 2 : props는 객체 형태로 전달되며 아래 예시처럼 name 조회 원할 경우 props.name으로 조회

 

//App.js
import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Waffle name="vanilla" />
  );
}

export default App;

//Waffle.js
import React from 'react';

function Waffle(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

 

○ useReducer 

- 특징 1 : useState의 setState 함수를 여러 번 사용하지 않아도 됨, 다른 곳에서도 쉽게 재사용 가능

 

 

○ useState

- 특징 1 : 요청 상태를 관리함

 

 

○ useEffect

- 컴포넌트가 렌더링 되는 시점에서 요청을 시작하는 작업

 

 

○ 컴포넌트 (참고 : https://goddaehee.tistory.com/299)

- 특징 1 : 리액트를 이루는 최소한의 단위

- 특징 2 : 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수

- 특징 3 : 항상 대문자로 시작(소문자로 시작하는 컴포넌트는 DOM태그로 취급)

- 특징 4: UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 작업 가능 

- 특징 5 : 함수형 컴포넌트와 클래스형 컴포넌트로 나뉨

 

 

○ DOM (참고 : https://dev-cini.tistory.com/10)

- 특징 1 : 웹페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델

- 특징 2 : 문서 객체(html, head, body와 같은 태그들을 javascript가 이용할 수 있는

           (메모리에 보관할 수 있는) 객체 의미) 모델을 의미

 

 

○ 가상 돔(virtual DOM) (참고 : https://dev-cini.tistory.com/11)

- 특징 1 : 큰 규모의 웹 애플리케이션 -> 스크롤바를 내릴수록 많은 데이터 로딩

             -> 많은 규모의 데이터가 DOM에 직접 접근하여 변화를 주면

                 렌더링(브라우저 로딩 과정 중 스타일 이후의 과정(스타일 -> 레이아웃 -> 페인트 -> 합성)이

                 일어나는 과정에서 시간이 증가함

==> 속도와 오류 부분을 개선하고자 가상 돔이 나옴

- 특징 2 : 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성해서 사용