4주차 회고록 - 리액트(React)

 React 

 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리로 웹 또는 앱 애플리케이션의 UI,

 보여지는 부분인 프론트엔드 영역을 구축하게 해주는 역할을 한다.

리액트의 특징

 [1] SPA(Single Page Application) 아키텍처

• 정의

     - SPA란, 한 개의 페이지로 이루어진 애플리케이션이라는 뜻으로, MPA(Multi Page Application)과는 상반된 개념이다.

 

• 특징

     - 딱 한개의 페이지로 구성된 웹 앱

     - 서버에 1회 리소스를 요청하고, 그 이후부터는 필요할 때 데이터만 받아와서 기존 페이지를 '수정'하는 방식으로 화면이 보여진다

     - SEO(Search Engine Organization)에 약하다.

     - MPA는 위와 반대로, 요청이 일어날때마다 웹페이지를 새로 다시 로딩하여 보여준다.

 

     - SEO란?

      : 검색 엔진 최적화로, 웹사이트가 유기적인 검색 방식을 통해 검색 엔진에서 상위에 노출될 수 있도록 최적화하는 과정이다.

         React는 HTML 파일이 딱 1개 뿐이고, 렌더링이 되기 전까지는 껍데기 html만 있어 기본적으로 검색 엔진이 올라가기 어렵다.

        이때문에 검색엔진이 긁어갈 수 있도록 미리 html 파일 내용을 보여줄 필요가 있는데 이를 위해,

        meta-tag, pre-rendering, server side rendering이 있다.

 

 [2] 컴포넌트 기반

     : 컴포넌트는 리액트 안에서 UI가 재사용이 가능할 수 있도록 개별적인 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.

       개념적으로 컴포넌트는 JavaScript 함수와 유사하고, 'props'라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를

       기술하는 React Element를 반환한다.    

 

  [3] 선언형

     : 무엇을 할 것이다.

     : 원하는 결과물을 얻기 위한 과정 하나하나 보다는 필요한 것들을 기술하는 데 중점을 둔 프로그래밍이다.

• 결과물에만 집중하고, 복잡한 과정은 메소드로서 사용하기 때문에 추상화하여 신경쓰지 않는다.
• 명령형인 경우, 코드 한 줄 한 줄 읽어나가며 어떤 일이 발생할지에 대해 예측해야 하지만 선언형인 경우 자세한 방법은 몰라도 코드만 보고 다음 일이 어떻게 일어날 지 예측이 단숨에 가능하다.
• 따라서 선언형이 가독성이 좋으며, 예측이 용이하다.

         <-> 명령형
                : 무엇을 어떻게 할 것이다.
                : 결과물을 얻기 위한 '과정'에 집중한다.

개발 환경 세팅

  [1] 필수 설치 프로그램

• 크롬 브라우저 
• VScode
• Node.js
• yarn or npm

  [2] npm과 yarn 비교

• 공통점

     : 둘 다 자바스크립트 런타임 환경인 노드(Node.js)의 패키지 관리자로, 런타임이란 프로그래밍 언어가 구동되는 환경을 말한다.

        자바스크립트의 대표저거 런타임 환경은 브라우저, node 환경 이 있다.

         즉, JavaScript 파일을 실행할 수 있는 방법이 브라우저, node 이렇게 2가지 이다.

 

• 차이점

     : NPM은 node.js를 설치할 때 자동으로 생성된다. 

     : YARN은 npm과 호환성이 좋고, 속도나 안정성 측면에서 npm보다 월등히 좋다

 

 

Create React App

  : CRA, 한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법이다.

      즉, 원래의 리액트 프로젝트 구성은 일일이 많은 것이 필요 했고, 커스터마이징도 가능하다.

 

[1] 생성

  : 원하는 파일 경로에서 

yarn create react-app 프로젝트 이름

[2] 실행 

yarn start

 

** 유용한 터미널 명령어

ls                                 // 현재 내가 위치하고 있는 곳 확인
cd 폴더이름             // 파일 경로 타기
mkdir 파일 이름     // 파일 생성하기

 

Props

  : 컴포넌트 간의 정보교환 방식으로, 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터이다.

• props는 반드시 [부모] -> [자식] 방향으로만 흐른다. (단방향)
• props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다

State

  : 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. 

     state가 필요한 이유는 값이 변경되었을 때 컴포넌트의 리렌더링을 하기 위함이다.