본문 바로가기

JAVASCRIPT/React11

[생활코딩 React 강의] Immutable이란? (concat, shouldComponentUpdate, Array.from, Object.assign) 생활 코딩 리액트 강의 state에다가 값을 추가할 때 push와 같은 원본 데이터를 변경하는 것 쓰지 말기 =>concat과 같은 세로운 데이터를 추가하는 것을 쓰자 (성능 개선할 때 편해짐) push대신 concat 쓰게 변경한 코드 this.max_content_id=this.max_content_id+1; var _contents = this.state.contents.concat( {id:this.max_content_id, title:_title, desc:_desc} ) //밑 부분 추가 this.setState({ contents:_contents }); 1-2. 내가 정한 상황에서만 렌더링 해! shouldComponentUpdate 특징: shouldComponentUpdate의 ret.. 2019. 8. 20.
[생활코딩 React 강의 4] CRUD 중 Create 구현하기 생활 코딩 리액트 강의 create로 바뀔 것 그에 따라 Content, 읽기에서 사용되는 컴포넌트가, 글을 추가할 때 사용되는 컴포넌트로 바뀔 것. 이 컴포넌트에는 form이 들어가 있을 것. form에 정보를 입력, submit 버튼 클릭 시 App 컴포넌트에 contents 목록에 새로운 컴포넌트 정보가 id,제목,본문이 객체로 담겨 contents에 추가될 것임 새로 추가한 컴포넌트를 클릭하면 mode가 다시 create->read로 바뀌고, selected_content_id가 해당 id로 바뀌고, 본문에 ( TOC에) 해당 내용이보여질 것임 1-1. TOC와 CONTENT 사이에 CREATE,UPDATE,DELETE mode로 진입할 수 있는 버튼 만들기 create,update,delet에 .. 2019. 7. 1.
[생활코딩 React 강의 5] 이벤트 설치해보기 응용 생활 코딩 리액트 강의 나만의 태그에 이벤트를 만들어서 태그/컴포넌트를 생산해보기 (리액트 스터디 4일 차의(리액트 스터디 4일 차의 응용) 하려는 것1: App.js의 subject 컴포넌트에 onChagePage라는 이벤트를 내가 만듦. 이 이벤트에 alert창 뜨게 하는 함수를 설치 그 이벤트가 발생되었을 때, props로 전달된 onChangePage 함수를 호출하면 됨. 여기까지 해서, 리로딩 방지하고 alert창 잘 뜨면 내가 만든 이벤트에 setState 이용해서 state 바꾸는 함수로 수정 전: App.js- header 태그 안의 코드는 원래 Subject.js에 있던 코드. 근데 쉽게 이해하기 위해 Subject의 코드를 바깥으로(app.js) 옮겨놨었을 뿐 후: header 태그 주.. 2019. 5. 19.
[생활코딩 React 강의 4] 이벤트 설치해보기 생활 코딩 리액트 강의 https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 이벤트 props, state, event 3개가 상호작용하여 애플리케이션의 역동성을 만듦 이번 시간에 하고자 하는 역동적 이벤트: [web, html, css, javascipt 단어에 링크를 거는 이벤트를 설치할 것임. 링크를 클릭하면 그에 따라서 App.js의 App 컴포넌트의 state가 바뀌고, 바뀐 state가 Content 컴포넌트의 props값으로 전달되면서 동적으로 애플리케이션으로 바뀌게 구현하기] 1.state 먼저 세팅하기 welcome 페이지인지, read 페이지인지 구분하기 위해 state에 mode라는 값을 줄 것임, mode가.. 2019. 5. 18.
[생활코딩 React 강의 3] State란? state 사용해보기 생활 코딩 리액트 강의 https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi State - props값에 따라 내부 구현에 필요한 데이터들 props-컴포넌트를 사용하는 입장에서 중요한 것 props가 하는 일과 state가 하는 일을 철저히 분리하여 최대의 효율/최고의 웹을 만들고자 하는 게 react의 특징 중 하나. 컴포넌트의 값을 초기화시키는 법 render() {} 보다 먼저 실행되어야 하고, 그와 동시에 컴포넌트의 값들을 초기화시켜주려면! => construtor안에 코드를 짜주면 됨. constructor가 있는 컴포넌트 형식은 아래와 같음 class App extends Component{ constructor(p.. 2019. 4. 26.
[생활코딩 React 강의2] 컴포넌트 만들기, Props, 컴포넌트 파일로 쪼개기 생활코딩 리액트 강의 -> https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 리액트는 왜 필요할까 예를 들어 이러한 코드가 있다고 생각해보자. index.html , sidebar.html ~ 사이드바 만드는 겁나 긴 코드가 있다고 가정 , top.html ~ top 유아이 만드는 겁나 긴 코드가 있다고 가정 index.html 파일을 보면 top /top 부분이나, sidebar /sidebar 와 같은 태그를 '내가' 적어주면 웹 브라우저에게 전달될 때는 저절로 sidebar.html과 top.html로(겁나 긴 코드) 바뀔 수 있다면? 겁나 편리. -> 이하 장점들 정리 가독성 (=겁나 길고 복잡한 코드를 내가 정의한 .. 2019. 4. 26.
[생활코딩 React 강의 1] 컴포넌트란? && React 기본 앱 뜯어보기 && 배포해보기 생활코딩 리액트 강의(이고잉님 thㅏ랑해요) -> https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi React =페이스북이 만든 자바스크립트 ui 라이브러리 =사용자 정의 태그를 만들어주는 기술 중 하나 컴포넌트 ='사용자 정의 태그'라고 생각 index.html sidebar.html ~ 사이드바 만드는 겁나 긴 코드 top.html ~ top 유아이 만드는 겁나 긴 코드 index.html 파일을 보면 부분이나, 와 같은 태그를 '내가' 적어주면 웹 브라우저에게 전달될 때는 저절로 sidebar.html과 top.html로(겁나 긴 코드) 바뀔 수 있다면? 겁나 편리. 이하 장점 들 정리 -가독성 정리 (=겁나 길고 복잡.. 2019. 4. 24.
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.

티스토리툴바