전체 글31 shouldComponentUpdate 메서드 책에 나온 설명을 보면서 이해했다. shouldComponentUpdate(nextProps, nextState) { ... } props 또는 state 를 변경했을 때, 리렌더링을 시작할지 말지를 지정하는 매서드 반드시 true, false 를 반환해야하고, 따로 생성하지 않으면 true 가 default 이 메서드 안에서 현재 props와 state는 this.props 와 this.state로 접근하고, 새로 설정될 props 또는 state는 nextProps 와 nextState로 접근할수 있다. 이 메서드를 잘쓰면 잘쓸수록 프로젝트의 속도 및 성능이 최적화 될것같다. 2021. 4. 22. Component 의 LifeCycle 예제 책보고 예제를 만들어보긴했는데 아직 완벽하게 숙지되지는 않는다. console 창을 켜놓고 계속 클릭 + 소스 분석을 더 해봐야 숙지할수있을것 같다. App.js 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 import React, { Component } from "react"; import LifeCycleSample from "./LifeCycleSample"; // 랜덤 색상을 생성합니다. function getRandomColor() { return "#" + Math.floor(Math.random() * 16777215).toString(16); } class App extends Component { .. 2021. 4. 22. Component 의 LifeCycle 라이프사이클 메서드에 Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전 실행 Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후 실행 render() 함수 constructor 메서드 getDerivedStateFromProps 메서드 componentDidMount 메서드 shouldComponentUpdate 메서드 getSnapshotBeforeUpdate 메서드 componentDidUpdate 메서드 componentWillUnmount 메서드 라이프사이클 메서드는 세가지 카테고리로 나눌수 있다. 마운트 - DOM이 생성되고 웹 브라우저상에 나타나는 것. 업데이트 - props 나 state 가 바뀔때, 부모 컴포넌트가 리랜더링될 때, this.forceUpdate로 강제로 랜더링을 트.. 2021. 4. 22. map() + @ 기본문법 arr.map(callback, [thisArg]) 주의사항 map() 을 사용할때 꼭 key 값 설정을 해줘야 함 관련 예제 IterationSample Component 를 만들어서 import 시키고 랜더링 시키기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import React, { Component } from "react"; import IterationSample from "./IterationSample"; class App extends Component { render() { return ( ); } } export default App; Colored by Color Scripter cs IterationSample.js 1 2 3 4 5 6 7 8 9 .. 2021. 4. 21. Component 에 ref 설정하기 1. 자식 Component 만들기 - ScrollBox.js 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 31 32 33 34 35 36 37 38 39 import React, { Component } from "react"; class ScrollBox extends Component { scrollToBottom = () => { const { scrollHeight, clientHeight } = this.box; this.box.scrollTop = scrollHeight - clientHeight; }; render() { const style = { border: "1px solid blac.. 2021. 4. 20. ValidationSample.js ( ref 함수 사용 + 유효성 검사 예제 ) ValidationSample.css 1 2 3 4 5 6 7 8 .success { background-color: lightgreen; } .failure { background-color: lightcoral; } Colored by Color Scripter cs ValidationSample.js 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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 import React, { Component } from "react"; import "./ValidationSample.css"; class Vali.. 2021. 4. 20. 이전 1 2 3 4 5 6 다음
