React - React 배우기전에 쓰는 이유 & 설치,셋팅

React 왜 쓸까?

리액트 문법부터 들이밀면 누구나 이해가 가지 않습니다.

리액트의 정확한 용도를 알아야 리액트라는 라이브러리를 이해할 수 있는데 Instagram과 같은 웹사이트에 들어가 보면 페이지 전환 같은게 새로고침 없이 부드럽게 동작합니다.

 

이런 사이트들을 Single Page Application 이라고 하는데

 

• html 파일을 1개만 쓰고
• 다른 페이지를 보여주고 싶을 때 html 부분만 갈아치워서 보여줍니다. 

그래서 부드럽게 동작합니다. 

 

JavaScript만으로도 만들 수는 있지만 코드가 너무 길어지고 복잡해지는 관계로 리액트(React)라는 자바스크립트 라이브러러리를 설치해서 사용하면 쉽게 만들 수 있습니다. 그래서 리액트라는 라이브러리를 배우고 사용하는 것입니다. 

 

 

리액트를 쓰는 또 다른 이유들은 

• html을 함수, array, object 이런 곳에 보관하고 재사용할 수 있어서 큰 프로젝트 일 수록 html관리가 편해집니다.
• React Native를 쓰면 같은 리액트 문법으로 모바일 앱개발도 가능합니다.(html,css문법만 조금 다릅니다)

 

---

설치 및 개발환경 셋팅

1. Node js를 설치한다 

2. Visaul Studio Code를 설치한다. 

 

다 설치한 후 바탕화면에 작업용 폴더를 하나 만들고 폴더를 shift+우클릭해서 powershell을 열어준다.

npx create-react-app blog를 입력해준다

 

vs code로 들어가서 방금만든 blog 폴더를 열어준다. 

 

폴더를 열면 아래와 같이 뜨는데 실질적으로 코드를 작성하는 부분은 src의 App.js이다 .

App.js의 코드를 보면 p태그안에 내용을 수정 한 후 브라우저를 열어보면 html파일이 수정이된다.

이유를 보면 App.js에 있는 html코드를 public폴더의 index.html에 자동으로 집어넣어주기 때문입니다. 

 

이외의 파일정보들은

• package.json : 프로젝트 정보
• node_modules : 라이브러리 코드 보관함
• public : static 파일 모아놓는곳(이미지파일 등 )
• src : 코드짜는 곳 

 

---

참고자료

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌