한입 크기로 잘라먹는 리액트 - 2

자바스크립트 기초와 응용은 일단락 지었고,

node 부분은 원래 배웠던 부분이 있어서 개념만 잡는 느낌이라 가볍게 넘어간다...

random color 패키지

CommonJS 방식으로 require('randomcolor') 로 가져와서 randomColor() 함수를 사용해줄 수 있다.

 

 

드디어, 리액트!

Node 기반의 jS UI 라이브러리

- Webpack : 다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리

- Babel : JSX 를 사용할 수 있도록 해주는 컴파일 라이브러리

 

왜 리액트인가?

1. 리액트는 Component 기반의 UI 라이브러리이다.

기본적으로 중복 되는 코드 부분(헤더, 푸터 등)의 수정이 필요한 경우, 산탄총 수술(1발로 다수의 총상을 입는다는...) 이라고 불리는 문제가 발생하여, 동일한 부분의 유지보수가 어려워진다. (일일히 수정해주기 ..)

-> 리액트의 컴포넌트는 재사용성이 좋기에 이러한 부분에서 전체 파일을 하나씩 바꿀 필요 없이, 해당 컴포넌트의 props 부분만 수정하면 되므로 유지보수가 쉬워진다.

 

2. 리액트는 선연형 프로그래밍이다.

기존의 js 는 명령형(함수형) 프로그래밍으로 절차를 하나하나 나열해줘야 한다. (jQuery)

---> 선언형 프로그래밍은 목적으로 바로 말해주는 React

 

3. Virtual DOM 사용

업데이트 횟수를 줄여줄 수 있다.

 

 

create-react-app

boiler plate, 이미 babel이나 webpack 등의 세팅이 완료된 서비스를 바로 개발할 수 있는 패키지를 의미

npx create-react-app 리액트명

npm start 로 리액트 프로젝트 시작

 

 

node_modules 폴더

기본적으로 필요한 리액트 프로젝트 모듈들이 들어있다.

협업 시에는 package.json 에 해당 모듈들이 기재되어 있으므로 .gitignore 에 추가해둔다.

npm i 로 자동적으로 설치가 가능하다.

 

public 폴더

favicon 은 인터넷 탭키에 보이는 아이콘

index.html 은 SPA 인 리액트의 가장 기본 html 파일로 #root 만 존재한다. <- 여기에 컴포넌트를 삽입해서 꾸며준다.

로고 png 와 manifest.json 은 모바일 화면이나 앱에서 사용되는 로고 정보를 담고 있다고 한다.

robots.txt 는 검색 엔진에서 사용될 내용을 넣어준다.

 

 

 

JSX 문법

1. 닫힘 규칙 - 여는 태그가 있으면 닫는 태그도 있어야 한다.

2. return 하려면 모든 태그를 감싸는 최상위 태그가 존재해야 한다.

► <React.Fragment></React.Fragment> 로 감싸주면 빈태그처럼 사용 가능

► <></> 를 사용해도 동일

3. class 는 className 을 사용해준다.

4. css 를 사용하여 import 로 가져와줄 수 있음 / 또는 인라인 스타일로 const style = { } 형식으로 지정해준다음, { }로 접근하여 객체로 스타일을 넣어줄 수 있음

5. 자바스크립트 사용을 위해선 { } 안에 써준다. 기호는X 숫자나 문자열만.