React

01. React란?

사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리

특징

1. 선언적 : 무엇을 해결할 것인가에 중점을 둔다.

2. 가상돔 : 이전 UI 상태를 메모리에 유지해서 변경될 UI의 최소 집합을 계산하는 기술

• 불필요한 UI 업데이트를 줄인다
• 돔 처리 횟수를 최소화 효율성
• 성능이 좋아진다.

3. component 사용(클래스, 함수 컴포넌트) : 재활용 가능한 UI 구성 단위

• 필요한 곳에서 재사용 가능
• 독립적으로 사용 가능하기 때문에 유지보수에 좋다
• 또 다른 컴포넌트를 포함
• 구성을 파악하기 용이함

- JSX 사용 : 리액트에서 사용한느 자바스크립트 확장 문법

• JSX로 작성한 코드는 브라우저에서 동작하기 전 Babel이라는 transcompiler를 통해 자바스크립트 코드 형태로 변환

---

02. React 작업 환경 설정하기

터미널 실행

1. cd Desktop/wecode - 데스크탑에 있는 위코드 파일로 들어감

2. npx creat-react-app westgram-react - 위코드 파일안에 westagram-react파일 생성

3. pwd - 모든 실행이 완료되면 현재 어디에 위치하고 있는지 확인

4. ls - npx creat-react-app을 이용해서 westgram-react 프로젝트 생성한 폴더 확인

5. cd westgram-react - 실제 프로젝트 폴더로 이동

6. git log - westgram-react폴더 안에서 CRA 확인

vscode실행

7. create-react-app . 원하는 폴더에서 리액트를 설치해준다.
   설치방법 참고

8. vscode로 폴더 열기 - 최상위 폴더로 열게되면 오류가 발생할수있으니 상위폴더로 열기

9. 프로젝트 실행시키기 - vscode안에서 터미널(command+J) 실행시킨후 npm start 명령어 실행시키면 리액트 크롬 화면이 실행됨

---

03. CRA 관련 파일 알아보기

📌 CRA란? 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구

• 하나의 명령어로 리액트 개발환경을 구축할 수 있다.

node_modules

npm으로 다운받은 모든 패키지들이 저장되어 있는 폴더

• npm install : vscode에서 react 화면을 보기위해서 npm start를 했는데 dependencies(필요한 모든 패키지 파일 -> node_modules)이 없을경우 입력해주는 명령어임
  입력 후 터미널 npm start해주면 크롬 화면이 다시 보여진다.

package.json

우리 프로젝트에 대한 정보들이 기입된 파일

• script : 프로젝트에서 실행할 수 있는 명령어들이 있는 곳
• dependency : 프로젝트에서 필요로하는 다른 패키지들에 대한 정보가 있는곳

gitnore

git으로 관리하지 않을 파일 또는 폴더 등을 기입해두는 파일

index.html

html의 엔트리 포인트 사용자가 우리 프로젝트를 요청하며 최초로 보여지는 html

index.js

javascript의 엔트리 포인트 html과 react 컴포넌트를 연결해주는 역할을 함(중간다리)

App.js

실제 화면에 보여지고 있는 컴포넌트

README

프로젝트 정보&문서

---

04. component란?

재사용 가능한 UI구성 단위를 말한다.

Class Component

• 초기에 많이 사용되던 컴포넌트 형태
• 함수형에 비해 문법과 사용법이 복잡함
• 하지만 클래스형으로 작성되어있는 기존 코드들도 많이 남아있기때문에 읽고 해석할 수 있어야한다.

Function Component

• 클래스형 컴포넌트에 비해 간단하고 단순
• 초창기에는 state를 관리하지 못한다는 단점으로 인해 잘 사용되지 않았음
• React 16.8 버전에서 hooks란 기능이 추가되면서 state를 관리할 수 있게 되어서 그 뒤로 자주 사용 됨
• 실제 현업에서 가장 많이 사용되고 있는 컴포넌트 형태