React 공부 자료

Open-Monitoring 프로젝트를 진행하면서 간단한 UI가 필요했다.

 

React를 활용해 간단한 UI를 구현하기로 결정했고 이를 위해 공부한 자료를 기록한다.

 

강의

• https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%ED%95%99%EC%8A%B5%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard

* 기존에 MVC 페턴에서는 컨트롤러가 모델이 변할 때 마다 뷰를 그려준다.
* Reactive 하다는 것은 모델이 변하면 이를 자동으로 인지해 뷰를 갱신하는 것을 의미한다.

* React
    * React에서 사용하는 라이브러리 정도
    * React.createElement()함수 => 리액트 엘리먼트 생성
    	* 리액트의 최소 단위
        * 트리 구조로 생성가능 => 가독성 없음
        * JSX 문법을 통해 React.createElement()함수가 아니라 일반 html형식으로 리액트 엘리먼트 생성 가능
        
* ReactDOM
    * 브라우저 돔 위에서 돈다.
    * 브라우저 돔 최적화 수행
* Babel
    * JSX문법을 리액트 엘리먼트로 변환하는 등 트랜스컴파일러 역할

* React 엘리먼트 vs React 컴포넌트
    * 컴포넌트는 UI를 나타내는 엘리먼트와 어플리케이션 로직을 포함한 상위 개념 
    * 로직은 컴포넌트의 상태를 변경하면서 UI 엘리먼트를 제어한다.

 

Create-React-app을 사용해 React 빠르게 시작하기

• https://www.daleseo.com/create-react-app/
• ㄴ
• ㄴ

 

React bootstrap을 사용해 UI 빠르게 개발하기

• https://samtao.tistory.com/30
• 공식 예제:
  • https://github.com/react-bootstrap/code-sandbox-examples/blob/master/README.md
• ㅇㄴ

 

UI 컴포넌트에 ajax를 달아 서버와 통신하기

• UI 컴포넌트에 이벤트 헨들러 달기
  • https://hyunalee.tistory.com/128
• ㄹㅇㄴ

 

UI 디자인 예시

• 최초 접근 시 기존 설정 되어 있는 엔드포인트 값을 보여준다.
  • 파란 부분이 기존 설정 되어 있는 엔드포인트이다.
• 기존 설정 되어 있는 엔드포인트 항목을 삭제 버튼을 눌러 지울 수 있다.
• 새로운 엔드포인트를 입력하고 입력 버튼을 누르면 추가된다.
• 해당 화면에서 원하는 엔드포인트 설정을 마치고 등록 버튼을 누르면 서버에 해당 정보가 전송됨
  • 서버는 기존 설정을 새롭게 들어온 요청으로 싹 갈아버린다.