본문 바로가기

React

 (29)
React component life cycle * class의 경우 constructor() render() ref componentDidMount() (렌더함수가 실행되고 리액트가 jsx를 돔에 붙이는 순간!) setState/props 바뀜 shouldComponentUpdate값이 true (false면 7,8번 건너뛰고 9번으로) render() componentDidUpdate() (부모가 나를 없앴을 때) componentWillunmount() (부모가 나를 없애지 않으면 9, 10번은 없음) 소멸 * Hooks의 경우 따로 lifeCycle 없지만 UseEffect로 비슷하게 할 수 있음. useEffect(() => { // 여기에 componentDidmount, componentDidUpdate 로직 return() => { 여기..
React CreateRef * Class 에서 ① 함수로 - 얘를 쓰는 경우 : 함수여서 ref를 설정할 때 자유도가 조금 있다. 미세하게 조정가능한 장점이 있다. inputRef; onInputRef = (c) => { this.inputRef = c ; }; ② 얘는 세팅시 current 필요 inputRef = createRef(); inputRef.current = "~~~"; inputRef.current.focus(); * Hooks에서 const React = require('react'); const { useState, useRef } = React; const WordRelay = () => { const [word, setWord] = useState('aaa'); const inputRef = useRef(n..
React 성능 최적화 최적화를 하지 않으면 setState를 할 때마다 전체 렌더링이 일어난다. 어디어디 렌더링이 일어나는지 확인 하는 방법 : devTool의 reactComponent 탭에서 톱니바퀴 누르고, Highlight updates when components render에 체크!! 1) Hooks 에서 : memo import React, { memo } from 'react'; const Try = memo(( props ) => { ... }); export default Try; 2) Class 에서 : PureComponent, shouldComponenetUpdate ① PureComponent import React, { PureComponent } from 'react'; class Try exte..
React 컴포넌트 나누기 - main.jsx 설명 ) "tryInfo" 이름으로 객체 v를, "index" 이름으로 인덱스i를 자식컴포넌트인 try 에 넘겨준다. return( { result } 시도: { tries.length } {tries.map( (v, i) => { return ( ); })} ); - try.jsx 설명) "props" 라는 이름으로 부모컴포넌트에게 데이터를 받는다. props.tryInfo, props.index 를 받을 수 있다. import React, { memo } from 'react'; const Try = memo(( props ) => { // props 의 값은 자식이 변경하면 안된다. 부모가 바꾸어야함. *원칙임! // 실무에서는 바꿔야할경우가있는데, 이럴경우 props를 stat..
React if문 * render 함수의 return 안에는 jsx가 오고, jsx 안에서는 for와 if를 못쓴다. 따라서 * 삼항연산자를 사용하는 것이 제일 깔끔하다 return result.length === 0 ? null : 평균 시간: {result.reduce((a, c) => a + c) / result.length}ms * 아니면 즉시 실행 함수를 통해서 { (() => { if(result.length === 0) { return null; }else{ return 평균 시간: {result.reduce((a, c) => a + c) / result.length}ms 리셋 } })(); }
React 반복문 * 반복문 사용 방법 3가지 1) 2차원배열 생성, 2) 객체 생성, 3) 즉시실행 함수 1) 2차원 배열 생성 ... return ( {[ ['사과','Apple'], ['오렌지','Orange'], ['포도','Grape'], ['바나나','Banana'], ['체리','Cherry'] ].map( (v) => { return ( { v[0] } - { v[1] } ); })} ); 2) 객체 생성 ... return ( {this.state.tries.map( (v, i) => { // return () 은 생략 가능. key에는 i 넣으면 안된다.(성능최적화 문제) return ( // 컴포넌트 분리함!! ); })} ); // try.jsx import React, { memo } from 'r..
React - import, require, export 관계 * require 와 import 차이 - require 는 node 의 모듈 시스템이다. - import, export 는 React 거야 - [ module.exports ] 랑 호환되는게 [ exports default ] 임 - require 랑 import 랑 호환되는경우도 있다. - require = import(엄밀히 따지면 다른거지만 지금은 호환된다고 생각해도 된다.) - moule.exports = exports default (엄밀히 따지면 다른거지만 지금은 호환된다고 생각해도 된다.) - module.exports = { hello: 'a'}; >> es2015 문법 - exports hello = 'a'; >> commonJs 문법 - node 에서는 require 만 써야함. 그런..
error)Uncaught Error: Extension context invalidated. getURL('build/react_devtools_backend.js'); 에서 에러나고있다고함 >> 크롬확장프로그램에서 리액트 삭제했다가 재설치하니 되었다.

티스토리툴바