[React & Node.js] React

0. React

• 리액트(React)는 UI를 효과적으로 구축하기 위해 사용하는 자바스크립트(JavaScript) 기반의 라이브러리이다.
• 리액트는 대화형 UI를 작성하기에 유리하다. 데이터가 변경되었을 때 효율적으로 렌더링을 수행할 수 있도록 한다.
• 캡슐화된 컴포넌트가 상태를 관리하고 UI를 효과적으로 구성할 수 있다.
• 기존의 소스코드를 불필요하게 다시 작성하지 않고 새로운 기능을 개발할 수 있다.
• 클라이언트 렌더링(그때그때 데이터를 받아오는 방식) 뿐만 아니라 서버 사이드 렌더링(서버에서 미리 만들어서 클라이언트로 보내주는 방식)도 지원한다.
• 그래서 Ajax등과 같은 비동기 방식과 비교했을 때 검색 엔진 최적화(SEO) 등에 있어서 유리한 형태로 소스코드를 작성할 수 있다.
• 이러한 검색엔진 최적화 문제는 상당수 SPA 프로젝트가 가지는 문제이다.

---

1. Customer Component 생성

---

2. 여러 고객을 표현

• Customer.js

• App.js

• 결과화면

• 그러나 App.js 에서 위와 같이 코드를 작성하면 매우 비효율적이다.
• JavaScript에서는 map 이라는 함수 기능을 제공한다.
• 다음과 같이 map을 사용하면 소스코드가 간편해진다.
• map에서 key값을 넣어줘야 Error가 발생하지 않는다.

---

3. Material UI 적용

• 최근에는 Bootstrap보다 Material UI를 더 많이 사용

https://material-ui.com/

Material-UI: A popular React UI framework

• npm으로 위 사이트에 나온 방법대로 설치한다.
• 적용시킨 Customer.js

• 적용시킨 App.js

• 각종 기능을 이용하였고 table의 최소 길이는 1080으로 설정하였다.