구현하는 기능과 배우는 컨셉
✔ 리액트 설치와 개발환경 셋팅
✔ 리액트 기초용어 의미
✔ 리액트를 사용하는 이유
필요한것 : node.js / visual stuido code 설치
npx create-react-app blog 명령어 입력
◾ eslint-disable
◾compiled는 실행되었지만 warning이 나타난다. eslint를 비활성화 시키면 warning이 보이지않게된다.
◾ npx : 라이브러리 설치를 도와주는명령어 (node js 필요)
◾ create-raect-app : 리액트 셋팅 다된 boilerplate만들기 쉽게 도와주는 라이브러리
◾ blog : project name
◾ npm start : 코드짠걸 미리보기 띄우기
◾ npm : 라이브러리를 쉽게 설치할수있게 도와주는 tool
◾ node_modules : 라이브러리 모은 폴더
◾ public : static 파일 보관함
◾ src: 소스코드 보관함
◾ package.json : 설치한 라이브러리 목록 (npm로 설치할때마다 목록에 정리됨)__
◾ index.js는 app.js를 index.html에 넣게해주는 기능을 하기때문에 app.js가 메인페이지가됨!
리액트를 사용하는 이유
리액트를 사용하게 된 배경을 알필요가 있다.
웹 페이지에는 HTML 태그와 데이터가 같이 섞여있기 때문에, 사용자가 데이터를 조작하려면 서버를 클라이언트에서 요구한 형식으로 만든 후, 새로운 페이지를 클라이언트로 전송하게된다. 즉, 서버는 다시 한번 HTML 페이지에 포함된 동일한 데이터를 클라이언트로 전송하게 되는것이다.
이런 문제를 해결하기 위해 등장한 것이 Data Binding이다.데이터 바인딩은 인터넷 익스폴로어 Dynamic HTML의 한 부분으로, 데이터와 HTML를 구분하기 때문에 데이터를 조작하기 위해 서버에 갔다 올 필요없이 클라이언트 상에서 수행 할 수있다. 쉽게말하자면, 새로고침 필요없이 랜더링이 되어 보다 더 빠른 웹페이지를 구현할 수 있다.
정리하자면,
– UX가 뛰어나서 좋은 사용자경험을 제공한다.
– HTML 관리가 편해진다.
– 리액트 문법으로 iOS/Android 모바일 앱제작도 가능하다.
– 서버개발자가 편해진다.
◾ 위의 예제를 보면, let posts를 서버에서 가져온 Data라고 하자.
◾ Data를 <h4> </h4>안에 보여줘야하는 상황이다.
◾ 자바스크립트 문법을 쓴다면 document.getElementByid().innerHTML =''이런 식으로 사용해야한다.
◾ 리액트는 보다 더 쉽게 Data를 사용할 수 있다.
◾ 여기서 함수, src, id, href등의 속성에서도 변수,함수를 사용할 수 있다.
