React 구조 ? 흐름 ? 리액트가 처음이라면 ?

구조라 해야할지 흐름이라 해야할지..

어떻게 작동하는지 잘 몰라서 노션으로 정리했던 내용을 옮겨 적으면서 복습하고자 한다.

꼬리에 꼬리를 무는 궁금증을 해결하기 위해 정리했던 나만의 정리 내용

 

설치방법이나 컴포넌트 작성법 등 무언가 실행하는걸 원했다면 뒤로가기 추천..

 

 

주요 특징

- 컴포넌트 기반

- JSX 문법 사용

- Virtual DOM : HTML DOM의 특정 요소만 바뀌어도 전체 DOM 을 다시 렌더링하는 DOM의 단점을 보완.

  ( DOM 내의 변경된 부분만 DOM 에 적용하는 기술 제공 , 부분 렌더링으로 성능 향상 )

- 리액트 개발 런타임 환경 : node.js

 

 

 

React 동작 흐름 (왜 어떻게 제일 처음에 index.html 을 읽게 되는가에 대해 궁금했음)

yarn start 명령어

> index.js 를 읽고

> App.js(최상위 컴포넌트) 가 돌아간다.

> 하위 컴포넌트 호출 (개발자가 개발한 UI 컴포넌트 호출)

> index.html 에 렌더링

 

 

 

yarn.lock 은 뭐지?

- 패키지 잠금 역할

- 패키지 관리를 위해 npm, yarn 사용

- 해당 메타 정보 package.json 파일을 통해 관리

- 직접 수정하는거 아님

- 패키지 의존성 이슈 발생 시, yarn.lock 을 통해서 확인 해결 가능

 

 

 

그럼 package.json 은 뭔데 ?

- 해당 프로젝트가 의존하고 있는 모든 패키지 이름, 버전 나열

- Dependencies : 꼭 설치 되어야 하는 라이브러리 리스트

( Dependencies 를 기준으로 node_modules 가 구성 )

 

 

 

public 디렉토리는 뭐지?

- 정적 자료들을 저장 ( html, 이미지 등 )

- 리액트 어플리케이션은 SPA이므로 html파일이 기본적으로 하나만 존재한다.

  public 에 있는 index.html 이 유일한 웹페이지 역할.

- index.html > body > div#root > App.js

* SPA(Single Page Application) : 화면 새로고침 X (하나의 페이지 안에서 비동기적 처리로 사용성 개선)

 

 

 

위의 동작흐름에서 App.js > 하위 컴포넌트 > index.html 이라고 했는데,

왜 여기서는 App.js가 맨 마지막이 되느냐.

 

index.html에 body 태그 안에 id가 'root'인 div태그가 있다고 해보자.

index.html에는 정말 'root' id를 가진 div 태그만 있다.

 

그런데 위에서 yarn start 명령어를 실행하면, index.js 부터 읽어온다고 했는데

index.js에는 root인 id를 가진 DOM에 createRoot를 해주고 있고, 밑에서 root.render를 해주고 있다. 어디로? App으로.

근데 저 App이 어디게? App.js 임.

 

그럼 그 App.js 에서는 뭘 할까. 'root' 인 div에 나타내줄 것을 렌더링 해주고 있다.

 

그러니까, 

- React 동작흐름:  yarn start > index.js > App.js > 하위 컴포넌트들 > index.html에 렌더링

- public에 있는 index.html에 있는 요소들의 흐름 : index.html > body > div#root > App.js

로 이해해서 적어봤다. 아니면 댓글 부탁해욤 !

 

 

 

src 디렉토리는 뭐지 ?

- 컴포넌트(js), css 파일 두는 곳 

 

 

 

함수형컴포넌트?

App.js, index.js 를 말한다.

- App.js : JSX 코드는 빌드 후 자바스크립트 코드로 변환

- index.js : 리액트 프로젝트가 처음 시작되는 진입점

 

 

 

yarn은 뭘까

- npm 의 단점/한계(보안 문제, 패키치 설치, 복원 속도 등)을 보완한 최신 패키지 매니저

- 리액트 개발할 때는 yarn 패키지 관리자 사용을 권장한다.(npm은 거의 사용하지 않는다고 한다?)

- yarn 명령어

// package.json 생성 & 프로젝트 초기화
yarn init

//패키지 복원(pacakge.json에 명시된 노드 패키지들 설치)
yarn install

//패키지 설치(특정버전 설치)
yarn add 패키지(@특정버전)

//특정 패키지 업데이트
yarn upgrade 패키지

//특정 패키지 삭제
yarn remove 패키지

//리액트 프로젝트 generater, 프로젝트 템플릿(기본적인 구조 잡아줌)
yarn global add create-react-app

//프로젝트 실행
yarn start

//소스 빌드한 최종 산출물 생성
yarn build

 

 

 

yarn build 

 

- 프로그램 배포하려면 빌드는 필수.

- "웹팩" 이라는 번들러를 통해 html, 자바스크립트 등 브라우저에서 읽을 수 있는 정적 소스로 전부 변환 된다.

  (리액트 SPA 기반으로 개발된 소스는 빌드 하지 않으면, 브라우저에서 인식을 못한다.)

  (웹팩 내용은 이전 글 참고 바람. 조회수를 부탁해요 :) )

- yarn build 를 하면, build 폴더 생성되고 그 안에 배포용 소스파일들이 생성된다.

 

 

 

JSX 가 뭔데 ?

JavaScript XML

- 자바스크립트에 XML 문법을 추가한 자바스크립트 확장 언어.

- html 과 같은 마크업 언어이다.

- html 과 비슷한 모습이지만, html 이 아니기 때문에 html 처럼 작성하면 안 된다. (xml 기반이기 때문에 닫는 태그는 필수)

  ex) class 로 적으면 안 되고, className 으로 적어야 함.

- 최상위 태그는 하나로 구성해야 한다.(최상위에 두 개의 수평한 태그로 구성하고 싶으면, Fragment 태그로 감싸기)

- JSX 내에 자바스크립트를 입력하려면 { } 블록 안에서 코딩

- 코드 블럭 안에서 삼항연산자 사용 가능.

- JSX 내에서 인라인스타일 적용 가능 (태그 안에 style 속성 직접 추가해서 사용하는 방식)

- JSX 에서는 카멜표기법 사용 '-' 사용하면 안 된다.

  ex) backgroundColor

- 인라인으로 바로 스타일 적용할 때는 중괄호 두개 {{ }}

 

 

 

컴포넌트 ?

- 리액트로 만들어진 앱을 이루는 최소한의 단위.

- 컴포넌트는 데이터(props)를 입력 받아, View(State) 상태에 따라 DOM Node 를 출력하는 형식이다.

- 컴포넌트 이름은 항상 대문자로 시작 (소문자로 시작하는 컴포넌트는 DOM 이라고 생각하기 때문이다.)

* DOM : Document Object Model, 문서 객체 모델

  객체 지향 표현, 프로그래밍 언어가  DOM 구조에 접근할 수 있는 연결 역할

 

 

 

함수형 컴포넌트

- 하단에 적는 export 로 파일을 불러올 수 있다.

- 가장 간단하게 컴포넌트 정의하는 방법은 자바스크립트 함수를 작성하는 것

- 확장자 없이도 검색 알아서 할 수 있다.( js > jsx 순서로 찾는다. )

 

 

 

클래스형 컴포넌트 (extends Component)

- 컴포넌트 구성요소, 리액트 생명주기 모두 포함

- 포로퍼티, state, 생명주기 함수가 필요한 구조의 컴포넌트 만들 때 사용.

 

 

 

컴포넌트 수명은요 ?

페이지에 렌더링 되기 전인 '준비과정'에서 시작하여 페이지에서 '사라질 때' 끝난다.

 

 

 

Side Effect

React 컴포넌트가 화면에 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 Side Effect 라고 한다.

 

 

 

렌더링이요?

브라우저 로딩 과정 중 스타일 이후의 과정

( 스타일 > 레이아웃 > 페인트 > 합성 ) 을 뜻한다.

 

 

 

라이프사이클(생명주기)

- Mount

  : DOM 이 생성되고 웹 브라우저 상에 나타나는 것.

  ( constructor, getDerivedStateFromProps, render, ComponentDidMount )

- Update

  : props가 바뀔 때, state가 바뀔 때, 부모 컴포넌트가 리렌더링 될 때, this.forceUpdate로 강제 렌더링 트리거 할 때

  ( getDerivedStateFromProps, showIdComponentUpdate, render, getSnap)

- Unmount

  : 컴포넌트를 DOM에서 제거하는 것

  ( ComponentWillUnmount )

 

 

 

라이프사이클 메서드

- '클래스 컴포넌트'에서만 사용 가능하다.

- 'will' 접두사가 붙은 메서드 : 어떤 작업을 작동하기 전 실행

- 'Did' 접두사가 붙은 메서드 : 어떤 작업을 작동한 후 실행

 

 

 

---

참고사이트

 

https://1nnovator.tistory.com/49

React에서 화면을 만드는 흐름 (index.js, index.html, app.js)

https://ko.reactjs.org/docs/glossary.html

React 기술 용어 모음 – React

https://velog.io/@youngminss/React-컴포넌트-생명주기-메서드

[React] 컴포넌트 생명주기 메서드

https://goddaehee.tistory.com/299

[React] 4. React 컴포넌트(1) - 컴포넌트란?

https://www.daleseo.com/react-hooks-use-state/

React Hooks: useState 사용법

https://codingbroker.tistory.com/72

[react package] 리액트 react-router-dom 사용법 - BrowserRouter, Route, Switch, Link

https://velog.io/@seomoon/리액트-함수형-컴포넌트-세미나

[React] 리액트 함수형 컴포넌트 세미나