React ?
2013년 페이스북에서 개발한 라이브러리 이다.
"지속적으로 데이터가 변화하는 대규모 애플리케이션 을 구축하는 것" 을 목표로 개발한다,
앵글러 , 뷰 등 다른 프레임워크와는 달리 리액트는 오로지 View를 그리는것 만 담당하는 라이브러리
내장되어있는 기능이 부족해 서드 파티 라이브러리를 활용하여 사용한다.
자기만의 문법을 가진 앵글러,뷰 와 달리 자바스크립트 문법을 그대로 사용한다
페이스북의 지속적인 관리가 이루이고있다.
프론트앤드 라이브러리 중 가장 많은 사용자수를 기반으로 생태계가 활성화 되어있다.
컴포넌트를 비교적 더 단순하고 간단하게 정의할 수 있다.
리액트 네이티브 등의 웹이 아닌 플랫폼에서도 활용할 수 있는 기술로 확장 가능하다.
프레임워크와 라이브러리의 차이 ?
프레임워크는 틀이 이미 짜여진 환경에 개발자가 직접들어가서 작업 하는것
라이브러리는 내가 작업을 함에있어 남들이 만들어 놓은 작업물을 내가 필요한대로 가져와서 작업하는 것이다.
선언적 , 절차적 개발 ?
절차적 (Vanila Javascript)
1. 청소기를 돌린다
2. 빨래를 돌린다
3. 걸레질을 한다
4. 쓰레기를 버린다.
선언적 (React)
1. 깨끗해진 방의 모습을 상상해서 그림을 그린다.
2. 로봇에게 그림을 전달한다. (React)
절차적인 과정에서 문제가 생기면 어느 부분에서 잘못됬는지 모든과정을 전체적으로 확인해봐한다. (유지보수가 어렵다.)
node & npm
Node는 자바스크립트 실행환경이다.(자바스크립트를 해석하고 실행할 수 있는 도구)
가장유명한 자바스크립트의 실행환경은 Browser이다.
Node는 Browser밖에서도 자바스크립트를 실행할 수 있도록 만들어주는 실행환경이다.
패키지
React -> ui구성
Babel -> 최신문법으로 변환
Webpack -> 파일 번들링
이러한 여러 패키지의 작업환경을 브라우저가 아닌 컴퓨터에서 사용할 수 있도록 만들어주는것이 Node이다.
ex ) 휴대폰
npm (Node Package Manager)
노드로 실행할 수 있는 여러 패키지들을의 관리를 도와주는 매니저이다.
ex) 앱스토어 , Play 스토어 등..
CRA(Create- React-App)
리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구(툴체인)
- 리액트는 UI 기능만 제공 , 따라가서 개발자가 직접 구축해야하는 것들이 많다.
- 처음 시작하는 단계에서는 직접 개발 환경을 구축하기 어렵다.
- CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다.
- CRA를 이용하면 하나의 명령어로 리액트 개발환경 구축이 가능하다.
node_modules
npm으로 다운받은 모든 패키지들이 저장되어 있는 폴더
package.json
우리 프로젝트에 대한 정보들이 기입된파일
script : 프로젝트에서 실행할 수 있는 명령어들이 있는 곳
dependency : 프로젝트에서 필요로하는 다른 패키지들에 대한 정보가 있는 곳
.gitignore
git 으로 관리하지 않을 파일 또는 폴더등을 기입해두는 파일
-node_modules 같은 경우에는 용량이 너무 크기때문에 깃으로 관리하지않고 깃헙에도 올리지않는다.
하지만 협업시 깃헙에서 내려받게되면 node_modules 가 없을 것 이다. 그럴때는 package.json안에있는 dependency항목을 다운받아주면되는데 vscode 터미널에 npm install이라고 작성하면 다운로드 받아진다.
index.html
- 사용자가 우리 프로젝트를 요청하야 최초로 보여지는 html
- public 폴더에 위치한다.
index.js
- html과 react 컴포넌트를 연결해주는 역할을 한다. 즉 중간다리.
- src 폴더에 위치한다.
App.js
- 실제 화면에 보여지고 있는 컴포넌트
- src 폴더에 위치한다.
리액트 컴포넌트는 항상 첫글자는 대문자로 적어줘야한다 . 파일도 마찬가지이다.
컴포넌트란 ?
재사용 가능한 각각의 독립된 모듈 (프론트 관점에서 본다면 재사용 가능한 UI의 단위)
컴포넌트의 장점
- 코드 재활용성 증가
- 코드 유지보수 용이
- 해당 페이지가 어떻게 구성되어 있는지 파악 용이
- 컴포넌트는 또 다른 컴포넌트를 포함(부모 컴포넌트 - 자식 컴포넌트)
Class 형 컴포넌트 와 Function 형 컴포넌트
Class형
- 초기에 많이 사용되던 컴포넌트 형대
- 함수형에 비해 문법과 사용법이 복잡하다.
- 클래스형으로 작성되어 있는 기존 코드들도 많이 남아있기 때문에 읽고 해석할 수 있어야한다.
// class형식
class Login extends React.Component {
render() {
return <h1>Login</h1>;
}
}
Function형
- 클래스형 컴포넌트에 비해 간단하고 단순하다
- 초창기에는 state를 관리하지 못한다는 단점으로 인해 잘 사용되지 않았음
- React 16.8버전에서 hooks란 기능이 추가되면서 state를 관리할 수 있게 되어서 그 뒤로 자주 사용함
- 실제 현업에서 가장 많이 사용되고 있기에 우리도 함수형 컴포넌트를 통해서 학습을 진행한다.
// function 형 함수
JXS
JSX 에서는 자바스크립트를 사용하겠다 라고 할때는 항상 중괄호{} 를 써줘야한다.
리턴문에서 style뒤에 중괄호 두개의 의미는 첫번째 중괄호는 지금 자바스크립트를 사용하겠다 라는 의미의 중괄호이고 그뒤 중괄호는 객체 즉 Object를 사용하겠다는 의미의 중괄호이다.