React 리액트 기본 개념 + 기초 용어 + 화면구성 및 설정

 

 

React 기본 개념

 

 

React란?

 

- 복잡한 사용자 인터페이스(UI)를 쉽게 구축하기 위해 페이스북에서 제작된 자바스크립트 기반의 라이브러리
- 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 주로 사용
- 특정 데이터에 변화가 생길 때 매번 변화를 주기 위한 코드를 작성하는 것이 아니라 기존 코드를 없애고 다시 새롭게 랜더링

 

- React는 html이 아닌 js로 html을 제어한다

- SPA방식으로 동적으로 제어하기 때문에 속도가 빠르다

- 리액트는 컴포넌트와 컨테이너로 이루어진 사이트를 만드는 것

 

 

리액트 라이프사이클

 

- 페이지에 컴포넌트가 생성되고, 수정되고, 사라지는 순서를 의미

- React에서 클래스 컴포넌트를 사용하면, 9개의 메소드를 통해 작업 흐름을 제어할 수 있다

 

마운트

- constructor : 새로운 컴포넌트를 생성할 때 마다 실행
- getDerivedStateFromProps : props를 state에 넣을 때 사용

-> 컴포넌트가 마운트될 때와 업데이트가 될 때 실행된다

- render : 준비해놓은 UI를 랜더링할 때 실행된다
- componentDidMount : 페이지에 컴포넌트가 나타난 직후 실행된다

 

업데이트

 - getDerivedStateFromProps
 - shouldComponentUpdate : true를 리턴 시 다음 라이프사이클 메소드가 계속 실행된다.
   만약 false를 리턴할 경우 작업이 중지된다.
 - getSnapshotBeforeUpdate : 컴포넌트 업데이트 직전의 값을 snapshot에 저장한다.
   또한 업데이트 직전에 실행된다.
 - componentDidUpdate : 컴포넌트 업데이트 직후 실행된다.

 

언마운트

   - componentWillUnmount : 컴포넌트가 사라지기 직전에 실행되는 메서드

 

 

React 기초 용어

 

랜더링(Rendering)

 

- 화면에 보여주는 것
- 코드가 번역(컴파일)되어 실행된 뒤 화면을 통해 사용자에게 보여진다.

 

초기 랜더링(Mount)

 

- 가장 처음으로 랜더링 되는 것
- render() 함수를 사용하여 view를 정의하고 초기 랜더링을 진행하게 된다

 

리랜더링(Re-rendering)

 

- 뷰를 업데이트 해야 할 때 다시 지웠다가 그려야하며, 이를 리랜더링이라고 한다
- 전체를 모두 지우고 다시 그리는 것은 비효율적이므로, 이전의 DOM트리와 새로운 DOM트리를 비교해 변경된 요소만 리랜더링
- 단, 부모가 리랜더링되면 자식도 리랜더링 됨
- 반대로 자식이 리랜더링 된다면, 부모가 리랜더링 될 수도 있다

 

컴포넌트(Component)

 

- 리액트에서 앱을 이루는 최소한의 단위
- 컴포넌트가 모여서 하나의 앱이 되며, 각 컴포넌트는 분리되어 재사용이 가능

- 리랜더링에서 지우고 새롭게 바뀌는 부분

- 이 컴포넌트가 모여 컨테이너(container)가 된다

 

 

버츄얼 돔(Virtual DOM)

 

- .html에서 화면(View)보다 가상돔(Virtual DOM)에 먼저 랜더링 된다
- 이전 Virtual DOM과 현재 Virtual DOM을 비교하여 이로 인해 변화가 되어 변경이 필요한 부분을 리랜더링시킨다
- react가 가지고 있는 가상 돔의 복사본

- state(상태)의 변화를 react에서 감지하고 있다가 state의 변화가 생기면 해당 state를 가지고 있는 components의 가상 돔과 실제 돔을 비교하여 변화가 생긴 components만 리랜더링한다

 

 

React 화면 구성 및 설명

 

 

 

 

public > index.html

src > app.js / index.js

리액트에서는 하나의 html(index.html)만 가지고 작업한다

index.html에서는 하나의 div만 있으며

이 안에서 js로 동적 제어한다 -> index.js

 

index.js에서 동적 제어하며 render한다

 

 

 

 

index.js에서 root로 render하라는 뜻으로

<React.StrictMode>는 테스트 모드이니 삭제하고 사용

 

 

 

 

index.js에서 말하는 app은 App.js의 jsx 문법을 말한다

js 내에서 태그를 사용할 수 있다

 

* xml은 태그 수정이 불가능하며

xml과 달리 jsx는 태그를 바꿀 수 있다

 

컴포넌트와 html을 구분하기 위해

컴포넌트의 앞글자는 대문자를 사용한다

 

 

 

 

파일을 생성해 작업을 시작한다

 

Jsx01.jsx 형태로 생성

-> jsx형태라는 것을 알려주기 위해 첫 글자는 대문자로 시작한다

-> 확장자는 .js 형태로 써도 .jsx로 인식한다

 

const Jsx01 = () => {
  return (
    <>
      <h1>안녕 리액트</h1>
    </>

  )
}

export default Jsx01;

 

 

jsx 파일을 사용하기 위해 const를 만들어준 후 그 안에서 작업

export default Jsx01; // 다른 파일에서 사용하기 위해 내보내준 것

 

 

 

 

Jsx01.jsx파일을 App.js에서 읽어오기 위해서는

<React.Fragment></React.Fragment>안에 넣어준 후

import 해 import Jsx01 from './Jsx01';로 추가해 주어야 한다

 

<Jsx01 />형태로 삽입 후 파일명에서 Ctrl + space bar 해서 Enter로 import가 삽입됨

 

 

 

 

function 내부는 매번 변경 시 마다 바꿔주기 어려우니

React.Fragment를 삭제하고 <></> 빈 상태로 사용하면 된다

 

 

 

 

만약 App.js에서 불러오려는 파일이 자동완성이 되지 않는다면

오른쪽 하단 상태표시줄의 언어 JavaScript 부분을 클릭해

Jsx형태로 변경해 주면 된다

 

 

React 단축키 사용

 

 

 

 

기본 코드 단축키 rsc 사용을 위해

Reactjs code snippets 설치

 

 

 

 

https://developernew.tistory.com/431

리액트 React 설치방법 feat. VS Code

 

https://ko.react.dev/

React