JAVASCRIPT22 DOM조작 & react_router 출처: 리액트를 다루는 기술-VELOPERT DOM이란? DOM(Document Object Model) = 객체로 문서 '구조'를 표현하는 방법. xml이나 html로 작성. =웹페이지를 구성하고 있는 문서/다양한 구성요소(=Document) 예를 들어 a태그 div라던지 이런 것들을 하나하나 객체로 만들어서 자바스크립트가 제어할 수 있도록 한 것이 DOM-트리 형태-> 특정 node를 검색/수정/제거/삽입이 가능. DOM 설명_MDN문서DOM_생코설명->웹 페이지를 핸들링하기 위한 프로그래밍 인터페이스. 자바스크립트를 통해 DOM를 제어해서 웹페이지를 제어DOM사용하는 일반적인 순서제어할 대상(각각의 엘리먼트)을 찾기대상이 가지고 있는 메소드를 실행하거나, 이벤트 핸들러를 설치하여 엘리먼트를 제어 -.. 2019. 1. 5. 1_추가 내용 컴포넌트는 반드시 하나의 엘레먼트만 리턴 라이프사이클? fragment 사용이유: state-비동기.순서 비유지. constructor 초기화를 먼저 해줘야 함. 초기화 부분 super(prop)constructor 쓸 떄 super(prop)은 꼭 한다고 봐도 무방. setState부분-기존의 값을 참조해서 값을 변경하고 싶을때비동기적이기 때문에 반드시 콜백함수 파라메터부분 신경쒀줘야 함 // 1. // this.setState({ // buttonClickCount: ++this.state.buttonClickCount // }); // 2. // this.setState((prevState/*, props*/) => { // return { // buttonClickCount: ++prevState.. 2018. 12. 17. 1_props & state 출처: 리액트를 다루는 기술-VELOPERT컴포넌트 생성 순서파일 만들기 -> 초기 코드 작성하기 -> 모듈 내보내고 불러오기코드: MyComponentimport React, { Component } from 'react'; import PropTypes from 'prop-types'; class MyComponent extends Component { render() { return ( 야호 ) } } export default MyComponent; //다른 파일에서 이 파일을 import할 때, //위쪽에서 선언한 MyComponent 클래스를 불러오도록 설정 //이 코드 작성 후, App 컴포넌트에서 MyComponent를 불러와 사용하면 됨.App import React, { Compon.. 2018. 12. 17. 1_es6, es7 학습, JSX 문법 출처: 리액트를 다루는 기술-VELOPERT들어가며es6, es7 문법es6모듈을 불러오는 방법. 모듈을 불러오는 키워드 import. import fs from 'fs';이전)var React = require('react'); var Component = React.Component; 지금) import React, {Componenct} from 'react';클래스 개념클래스 없 vs 클래스 있var와 const, let 키워드 *기본적으로 const 사용, 해당 값을 바꾸어야 할 때 let 사용하면 됨. *var키워드: 해당 값을 사용할 수 있는 코드 영역이 함수 단위이다.const와 let의 해당 값을 사용할 수 있는 코드 영역은 블록 단위이다.const와 let은 블록 내부에서 중복 선.. 2018. 12. 17. Prev. 1 2 Next.