[정리] 기능별 개념 정리/React(12)
-
React 강의 정리 (3,4)
NPM : NodeJS 로 만들어진 모듈들을 설치, 버전 관리해주는 툴 NodeJS 를 설치하면 NPM 이 같이 설치된다. 디렉토리 구조 project ---- node_module ---- public -------- index.html ---- src -------- index.js -------- components ------------ ... package.json webpack.config.js 기본 파일 세팅 방법 1. 강의에서 제공하는 기본 틀 https://github.com/velopert/react-codelab-fundamentals 방법 2. 페이스북에서 만든 create-react-app 프로그램을 설치 받아서 프로젝트 생성 https://velopert.com/2037 expo..
2019.08.18 -
React 강의 정리 (2)
Codepen 환경설정 React ReactDOM Babel : 웹사이트 호환을 위해 ES6 -> ES5 해주는 역할 ES6 의 class 익명 클래스 지원 static 메소드 지원 상속 지원 super ES6의 let : 블록 scope var 는 메소드 scope 이다. JSX React component 안의 render 메소드에 작성되는 Javascript extension " " 없이 XML-like syntax 를 작성한다. ( ) 으로 대체해서 쓰긴하지만 괄호를 안써도 되긴한다. 모든 JSX Element 코드는 Container element 에 포함되어야한다. (ex. ) JSX 안의 JS 표현은 { } 으로 한다. (ex. {this.props.buttonText}) JSX 안의 Sty..
2019.08.18 -
React 강좌 정리 (1)
강의 출처 Redux : Facebook 에서 주도하는 Flux 데이터 아키텍쳐, 어플리케이션의 상태 관리 Webpack : 모듈 번들러 ES6 : JS 표준 Express : NodeJS MongoDB : NoSQL Angular JS 와 같은 프레임 워크는 정해진 틀에서 벗어나기 힘들다. AngularJS 는 뷰 프레임 포함된 개념이다. React JS 는 유저 인터페이스를 만들기 위한 Library 다. ReactJS 는 뷰를 개발하는 용도다. React JS 가 Angular JS 를 대체 할 수 있는 것은 아니다. React Native : 모바일 앱을 React 로 개발하는 프레임워크 장점 Virtual DOM : https://www.youtube.com/watch?v=BYbgopx44vo ..
2019.08.17 -
React 기본 (3)
데이터 변경을 Render 에 어떻게 반영시킬까? this.state 에 있는 값을 변경한다고 렌더링 까지 자동으로 호출 되어 반영 되는 것은 아니다. setState 메서드를 호출해서 변경해야만 렌더링 까지 자동으로 호출 되어 반영이 된다. 배열과 객체에 데이터를 추가 삭제하는 경우가 생겨서 이를 반영하고 싶을 때는? 기존의 배열, 객체에 push, pop 한다고 렌더링이 반영되지 않는다. 배열과 객체의 데이터 변경을 반영하고 싶으면 새로운 것으로 대체해야 반영이된다. (Immutable) 내부적으로 객체의 주소를 비교해서 변경 여부를 판단하고 렌더링을 할지 말지 결정하기 때문이 아닐가 싶다. Immutable 을 만들 땐 배열은 spread operator 를 쓸 수 있다. Immutable 을 만들..
2019.08.16 -
React 기본 (2)
1. Render 할 때 다른 클래스의 Render 를 호출 시킬 수 있다. 는 함수의 호출과 유사하다. 즉 Call stack 이 쌓이는 과정이다. this.props 는template 문법이다. props 는 부모 노드를 의미한다. props 를 통해 부모 노드가 내려준 argument 를 받아 사용할 수 있다. props 는 Read only 이다. props 는 렌더링 할 때 참고하는 용도이다. 2. props 를 통해 부모노드로 부터 값을 받아 출력할 수 있다. 3. 생성자 안에 state 를 정의해 사용할 수 있다. this.state = 지역변수, 객체의 멤버 변수라고 보면 좋을 듯 하다. 4. 이벤트 핸들러를 호출 하도록 할 수 있다. 5. 상위 컴포넌트로 부터 이벤트 핸들러를 받아 처리 ..
2019.08.16 -
React 기본 (1)
강의 출처 SPA (Single Page Application) : 여러 페이지가 있는것 처럼 보이지만 사실 하나의 페이지로 구성되어 Ajax 와 같은 것을 통해 동작하는 웹 어플리케이션. 백엔드는 API 만 제공한다. SPA는 히스토리 관리가 필요하다. 히스토리 관리를 하지 않으면 사용자가 뒤로가기 키를 눌렀을 때 의도와는 다르게 다른 페이지로 이동하게 된다. SPA Framework Angular : 구글에서 개발. MVC 등 개념적으로 백엔드와 겹치는 부분이 있어서 백엔드 개발자들이 선호 React : 페이스북에서 개발. 함수형 프로그래밍. 최근에 Vue.js React 는 프레임워크는 아니다. React 는 라이브러리다. Angular 는 프레임워크가 맞다. 프레임워크라 하면 역할이 정해져있고 이..
2019.08.16