[Reactjs] 리액트 소개 및 환경 설정

리액트 프로젝트를 진행하기에 앞서 먼저 리액트란 무엇인지 설명해보겠다.

<리액트 공식 사이트_한글ver>

https://ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

 

<리액트 공식 사이트_영어ver>

https://reactjs.org/

React – A JavaScript library for building user interfaces

 

어떤 언어, 라이브러리를 사용하기 전에 항상 해당 언어나 라이브러리의 공식 사이트를 알아두고, 그 사이트를 통해 공부하는 습관을 들이면 좋다.

리액트의 공식사이트는 한글, 영어 모두 지원하므로 편한 곳으로 보면 되겠다.

 

리액트를 왜 사용하는가?

 

1. 사용자 인터페이스 ( 화면, 버튼 등 )을 쉽게 만들기 위함

리액트는 SPA( Single Page Application: 서버에서 제공하는 페이지가 한 개( html파일이 한 개라는 뜻 )이며,

로딩을 한 번 하고난 후에는 브라우저 내에서 나머지 페이지들을 정의하여 보여준다.

이로 인해 화면 전환 시 화면이 깜박이는거 없이 자연스럽게 넘어간다. -> 페이지 로딩되는 느낌없이 자연스럽게 넘어간다. ) 를 사용하기 때문에 “사용자 경험”이 좋다.

웹보다는 앱에서 “사용자 경험”이 더 좋은 편인데, 리액트를 사용함으로써 앱같은 경험을 웹에서 제공할 수 있다.

 

2. 데이터 처리 쉽게 하기 위함

페이스북은 엄청난 규모의 웹사이트(단일 웹사이트중에서전 세계에서 제일 큰 웹사이트)이다. 그래서 페이스북이 웹사이트를 효율적으로 관리하기 위해 리액트를 만든 것인데, 그런데 만약 리액트가 jquery로만 웹사이트를 만들었다면 데이터가 화면에 연동하는 부분이 어렵게 된다. 왜냐하면 만약에 누군가 “좋아요” 버튼을 눌렀다면 해당 피드에 해당하는 부분을 찾아서 “좋아요”버튼을 업데이트 해야하고, 만약 “좋아요” 버튼만 업데이트 하면 되는대 실수로 post통째로 업데이트하면 낭비가 발생한다. -> 즉, 데이터랑 화면이랑 일치시키는 것은 매우어렵다. 하지만 리액트는 이것을 자동으로 해준다.

 

3. 정리가능한 웹 컴포넌트

웹 사이트만들 때 생각보다 중복되는 부분이 상당히 많다

따라서 리액트를 사용함으로써 반복되는 내용을 컴포넌트를 활용해서 관리할 수 있어서 중복을 피하고 유지,보수에 용이하다. 왜냐하면 만약 중복되는 부분을 컴포넌트를 사용하지 않고 관리한다면 한 부분의 변경사항이 발생했을때 중복되는 모든 부분을 일일이 수정해야 한다. 하지만 만약 리액트 처럼 중복되는 부분을 컴포넌트로 관리하게 된다면 해당 컴포넌트 부분만 변경하면 이 컴포넌트를 쓰는 모든 부분이 수정되기때문에 컴포넌트를 활용하는 것이 유지-보수에 훨씬 효율적이다.

 

=> 총정리

1.     사용자 경험이 좋아진다.( 웹에서 앱과 같은 사용자 경험을 느낄 수 있게 해줌 )

2.     데이터와 화면의 연동이 좋아진다

3.     컴포넌트 재사용을 통해 중복되는 요소를 하나로 묶을 수 있다. ( 중복을 없애고, 유지 보수에 용이해진다. )

https://reactnative.dev/

// 리액트 사용하는 웹사이트 볼 수 있다. Ex. 우버, 인스타그램, 에어비앤비

 

뿐만 아니라 

Reactjs는 기존에 사용하던 class형식 프로그래밍에서 벗어나 React 버전 16.8부터 React 요소로 새로 추가된 Hook을 사용합니다. 이를 통해 function component에서 state를 가질 수 있게 되어 class component, render 등을 할 필요없이 모든 것이 하나의 function이 되는 함수형 프로그래밍이 가능해졌습니다. 따라서 해당 프로젝트는 함수형 프로그램으로 진행할 예정이다.

 

이상으로 리액트의 특징에 대해 간단하게 알아보았다. 추후 게시글을 더 올리면서 위에서 애기한 리액트의 장점들을 볼 수 있을 것이다. 부족하고 궁금한 부분이 있다면 공식 사이트를 참고하는 것도 좋은 공부경험이 될 것이다.

 

 - 리액트 기술용어 모음: https://ko.reactjs.org/docs/glossary.html

==========================================================================

리액트 프로젝트 환경설정

리액트는 자바 스크립트로 웹페이지를 구현할때 도움을 주는 라이브러리 인데 기본적으로 node.js가 깔려있어야 한다.

https://nodejs.org/ko/

Node.js

해당 사이트에서 LTS버전을 다운받는 것을 추천한다

node를 다운 받았다면 "윈도우키+R" or "windows 하단 파일검색창" 에 "cmd"를 검색해서 명령프롬프트를 띄우고

node --version 명령어를 통해 local에 설치된 node의 version을 확인해 본다.

 

프로젝트를 위해 바탕화면에 webproject라는 폴더를 만들고 kediTalk이라는 앱을 만들어보자

필자는 VS code를 활용할 것이다. ( 아래에 있는 명령어는 위와같이 cmd에서 작성해도 괜찮다 )

C:\Users\kyung\Desktop\webproject

C:\Users\kyung\Desktop\webproject> npm install -g create-react-app

C:\Users\kyung\Desktop\webproject> create-react-app "앱 이름" // 현재의 경우 kediTalk

C:\Users\kyung\Desktop\webproject> cd "앱이름" //현재의 경우 kediTalk

C:\Users\kyung\Desktop\webproject\kediTalk> npm start

위 사진과 같이 뜬다면 성공한 것이다.

생성된 각 파일들에 대해 간략하게 알아보자

1. index.html

메인 프로그램인 index.js에 대응되는 것으로, HTML 템플릿 파일이다. 이 파일이 직접 표시되는 것은 아니고, index.js에 의해 불러와서 렌더링된 결과가 표시된다.

 

2. App.js

이것은 컴포넌트를 정의하는 프로그램이다. 실제로 사용자에게 보여지는 화면에 표시되는 내용 등은 여기에서 정의된다.

 

3. index.js

src 폴더에 포함되어 있다. 메인 프로그램이라고 할 수 있다. 여기에서 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링하고 실제 표시한다.

 

4. .gitignore

github에 올릴때 무시하고자 하는 파일 및 폴더를 위치 시키면 나중에 github에 올릴때 .gitignore에 있는 파일 및 폴더들은 github에 올라가지 않는다. 주로 .gitignore에 위치하는 것에는 node_modules ( 파일이 엄청 많기 때문 ), 개인적인정보 및 보안유지가 필요한 파일들이 해당된다.

 

5. package.json

앞서 .gitigore로 node_modules를 제외하고 github에 올라가는데 이때 이 코드를 다운받아서 다른 작업환경에서 프로젝트를 실행시킬때 필요한 모듈들의 종류와 버전을 확인할 수 있고 npm으로 필요한 설치할 수 있다.

 

지금까지 Reactjs의 소개 및 환경설정에 대해 살펴보았다.

이제 본격적으로 리액트 프로젝트를 진행해보자.