일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- React Component
- NPM
- 클래스컴포넌트
- sementicversion
- NoSQL
- npm명령어
- 제로초예제
- mongoose
- express-generator
- MongoDB
- node
- 리액트스타디
- nodejs교과서
- nodeJS
- 리액트
- 시퀄라이즈
- sequelize
- mongo
- React
- 시퀄라이즈공부
- 리액트기초
- component
- 리액트컴포넌트
- Today
- Total
목록React/basic (28)
개발노트
state랑 props가 바뀌어야만 렌더링 되야 되는데. state값이 바뀌는 이벤트가 아니더라도 render링이 다시 되는 문제가 있다 import React, { Component } from 'react'; class Counter extends Component { state = { counter: 0, } onClick = () =>{ this.setState({}); } render (){ console.log('렌더링'); return( click ! ) } } Class Component 1. shouldComponentUpdate 그래서 shouldComponentUpdate라는 메서드를 사용 (이럴경우에 렌더링을 해줘라고 다시 지정하는것) 성능최적화를 해야한다 shouldComponen..
(클래스컴포넌트에서) 매서드 화살표 함수 대신 매서드로 사용하려면 class Number extends Component{ constructor(props){ super(props); this.state = { result: '', value: '', answer: getNumbers(), tries:[] }; this.onSubmitForm = this.onSubmitForm.bind(this); //여기 this.onChangeInput = this.onChangeInput.bind(this); } onSubmitForm (e){ e.preventDefault(); console.log(this.state.value); } //사용자입력값 onChangeInput (e){ console.log( th..
리액트 반복문은 기본적으로 map을 사용 기본 map 의 원리는 배열안의 값들 하나씩을 v인자로 받아서 보여주는 형식 { ['apple','banana','cherry'] .map( ( v )=>{ return( {v} ) })} 2차원 배열로 표현 { [ ['apple','red'],['banana','yello'],['cherry','black'] ] .map( ( v )=>{ return( {v[0]} {v[1]} ) })} v인자가 ['fruit','color']니까 v[0], v[1] 이런식 객체로도 표현이가능 {[ { fruit:'apple', color:'red'}, { fruit:'banana', color:'yello'}, { fruit:'cherry', color:'black'} ] ...
require const React = require('react'); const ReactDom = require('react-dom'); const { Component } = require('react'); node (commonJS) 문법 import import React, { Component } from 'react'; import ReactDom from 'react-dom'; es6 문법 require은 CommonJS라고 node에서 쓰는 js인데, 이와 같은 역할을 하는 import는 리액트에서 쓰는 js문법이다 쓸수 있는 이유가 entry로 받아서 babel모듈적용해주는 과정에서 바벨이 이런es6 문법을 CommonJS로바꿔주어서 사용이 가능한 것. ( index.jsx 에서 som..