본문 바로가기

FrontEnd/React20

useReducer useReducer는 redux의 핵심 부분을 리액트에 들여온 기능입니다. 소규모 앱에서는 redux를 사용하지않고 useReducer Contextapi 조합으로 대체를 할 수 있습니다. 비동기 부분 처리를 위해 결국에는 리덕스를 써야 합니다. 컴포넌트의 구조입니다. 실직적으로 클릭되는 것을 td라고 했을 경우 데이터를 전달하기 위해서 table, tr을 거쳐서 td로 오게 됩니다. 이러한 해결을 위해 contextApi를 사용합니다. 그리고 state자체의 개수를 줄이는 useReducer가 있습니다. state가 많아지면 관리가 힘들며 넘겨줄 때도 여러 컴포넌트를 거쳐야 합니다. state를 통일할 수 있도록 도와주는 것이 useReducer입니다. 문법은 다음과 같습니다. const [state,.. 2020. 7. 23.
useMemo 와 useCallback useMemo는 hooks사용 시 사용한다. hooks는 기본적으로 렌더링 될 때마다 전체가 전부 실행되는데 만약 state의 기본값으로 함수가 들어가 있다면 함수가 렌더링 될 때마다 실행된다. 그렇기 때문에 기억하는 공간이 필요한데 그때 사용하는 것이 useMemo이다. import React, {useState, useRef, useEffect, useMemo} from 'react'; function getNumbers(){ console.log('hi'); } const Number = () => { const { num , setNum} = useState(getNumbers()); }//이경우 함수의 반복적실행 고치기위해선 const newNumbers = useMemo( () => getNu.. 2020. 7. 22.
리액트 라이프사이클 jsx에서는 if나 for을 사용할 수 없지만 함수 안에서는 가능하다. return ( {(() = > { if(result.lengh === 0){ return null; }else { return hi } })()} ) 다만 함수를 즉시 실행 함수로 만들어야 한다. 이렇게 하느니 차라리 분리하는 것이 좋을 듯합니다. 반복문 역시 함수 안에서 사용할 수 있습니다. 리액트 Component사용시 react dev-tools를 이용해 성능 체크를 한 다음 pureComponent로 넘어가는 것이 좋습니다. componentDidMount는 처음 렌더링이 성공적으로 실행이 됐다면 실행됩니다 리 렌더링 시에는 실행되지 않습니다. 리 렌더링 시에 호출되는 함수는 componentDidUpdate입니다. 부모가 .. 2020. 7. 22.
React Devtools 리액트의 렌더링은 hooks 기준으로 setState만 호출 됐을 때 실질적인 state가 변경되지 않았을 경우에도 렌더링 되는 것을 확인할 수 있다. 따라서 그러한 것을 막기위해 shouldComponentUpdate에서 지정해줄 필요가 있다. shouldComponentUpdate(nextProps, nextState, nextContext){ if(this.state.counter !== nextState.counter){ return true; } return false; } 이렇게 하지 않고 간단하게 PureComponent를 사용하는 방법이 있다. import React, {PureComponent} from 'react' class Try extends PureCompnent {} hooks.. 2020. 7. 19.
반복문 {[1,2,3,4,5,6].map( (v) => { return ( {v} ); 보통 태그 안에 복잡한 태그들이 섞여있는 경우에는 이차원 배열을 활용할 수 있습니다. {[ [1,2], [2,3], [3,2], [4,2], [5,2], [6,3] ].map( (v) => { return ( {v[0]} {v[1]} ); })} 객체로도 할 수 있습니다. {[ { num1 : 1, num2 : 2 }, { num1 : 3, num2 : 2 }, { num1 : 41, num2 : 2 }, { num1 : 21, num2 : 2 }, ].map( (v) => { return ( {v.num1} {v.num2} ); })} 리액트가 key를 보고 같은 컴포넌트인지 아닌지를 이해하기 때문에 key를 정해주어야 합.. 2020. 7. 18.
require, import require는 노드의 모듈 시스템이다. const React = require('react'); const ReactDom = require('react-dom'); const { hot } = require('react-hot-loader/root') 노드의 module.exports는 export default. 호환된다. 깊이 따지면 다르다. import는 ES2015 문법이다. import React 'react'; import ReactDom 'react-dom'; import { hot } 'react-hot-loader/root'; export default ....; exports 되는 게 객체나 배열이면 구조 분해할 수 있습니다. import React, {Component} from .. 2020. 7. 18.
babel preset env , plugins preset env에 설정을 저장할 경우 다음과 같다. module : { rules : [{ test : /\.jsx?/, loader : 'babel-loader', //test에 부합하는파일을 컴파일 options : { presets: [ ['@babel/preset-env', { targets : { browsers : ['last 2 chrome versions'], //원하는 부분만 가능 만약 옵션이 없다면 모든 브라우저를 번역하므로 느려질 수 도있다. } }], '@babel/preset-react'], exclude : ['./node_modules'], }, }], }, browers의 옵션들은 다음 홈페이지에 있다. https://github.com/browserslist/browse.. 2020. 7. 16.
webpack 실제 배포할 때 react.production.js로 변경 1. npm init package.json 생성 2. npm i react react-dom 리액트 설치 3. npm i -D webpack webpack-cli (-D : 개발에서 사용되는 webpack으로 설치) 만약 우리가 만든 컴포넌트가 몇만 개라면 감당하지 못한다. 따라서 별도의 파일로 분리해주는데 이러한 분리된 파일을 마법처럼 합쳐주는 것이 웹팩이다. 파일을 쪼개는 경우 //필요한 라이브러리 const React = require('react'); const ReactDom = require('react-dom'); const {Component} = React; class WordRelay extends Component{ stat.. 2020. 7. 16.
AppBar의 검색기능 구현 검색창에 대한 속성을 지정해줍니다. searchKeyword라는 값으로 state값을 변경할 때마다 고객 정보를 업데이트합니다. 그러기 위해서 생성자에서 초기화를 해주어야 합니다. 빈 공백 문자는 모든 문자열이 포함하고 있기에 초기값으로 적당합니다. constructor(props) { super(props); this.state = { customers: '', completed : 0, searchKeyword : '' } } onChange이벤트를 받는 handleValueChange를 정의해줍니다. handleValueChange = (e) =>{ let nextState ={}; nextState[e.target.name] = e.target.value; this.setState(nextStat.. 2020. 7. 16.
AppBar 와 웹 폰트 적용 AppBar는 검색, 혹은 내비게이션으로 사용되는데요 다음과 같은 예제를 확인하면 icons 라이브러리가 필요한 것을 확인할 수 있습니다. 따라서 라이브러리를 설치합니다. npm install --save @material-ui/icons 대신 클라이언트 폴더로 이용한뒤 설치가 필요합니다. 이제는 material-ui의 예제를 그대로 사용할 것이기 때문에 복사 붙여 넣기를 합니다. import React, { Component } from 'react'; import Customer from './compnents/Customer' import CustomerAdd from './compnents/CustomerAdd' import './App.css'; import Paper from '@materia.. 2020. 7. 16.

티스토리툴바