FrontEnd30 Purecomponent 사용하기(class형 컴포넌트) PureComponent 사용하기(class형 컴포넌트) class형 컴포넌트에는 Component와 PureComponent가 있다. 두 컴포넌트 모두 props와 state의 변경에 따라 render() 함수를 호출하는데, 변경에 대한 기준이 다르다. PureComponent에서는 비교 대상의 값을 비교해 동일하지 않으면 변경이 발생했다고 본다. 불필요한 render() 함수 실행을 줄이면 페이지 성능을 향상시킬 수 있다. 예제코드 App.js import React from 'react'; import './App.css'; import PureComponentClass from './R028_PureComponentClass.js'; function App() { return ( Start Rea.. 2022. 6. 27. Component 사용하기(class형 컴포넌트) Component 사용하기(class형 컴포넌트) class형 컴포넌트에는 Component와 PureComponent가 있다. 두 컴포넌트 모두 porps와 state의 변경에 따라 render() 함수를 호출하는데, 변경에 대한 기준이 다르다. Component에서는 비교 대상이 완전히 동일하지 않으면 변경이 발생했다고 본다. 예제코드 App.js import React from 'react'; import './App.css'; import ComponentClass from './R027_ComponentClass.js'; function App() { return ( Start React 200! css 적용하기 ); } export default App; R027_ComponentClass.j.. 2022. 6. 27. state를 직접 변경한 후 forceUpdate() 함수 사용하기 state를 직접 변경한 후 forceUpdate() 함수 사용하기 this.state.변수명 = value와 같이 직접 state를 변경하면 render() 함수를 호출하지 않으므로 화면에 보이는 state 값은 바뀌기 전 상태로 남게 된다. 이때 forceUpdate() 함수로 화면을 새로 고침하면, render() 함수를 호출해 변경된 값을 화면에 보여줄 수 있다. 예제코드 App.js import React from 'react'; import './App.css'; import ForceUpdate from './R026_ForceUpdate.js'; function App() { return ( Start React 200! css 적용하기 ); } export default App; R026.. 2022. 6. 27. setState() 함수 사용하기 setState() 함수 사용하기 this.state.변수명=value와 같이 state를 직접 변경하면 render() 함수를 호출하지 않으므로 화면에 보이는 state 값은 바뀌기 전 상태로 남게 된다. setState() 함수로 state를 변경해야 render() 함수를 호출해 변경된 값을 화면에 보여줄 수 있다. 예제코드 App.js import React from 'react'; import './App.css'; import SetState from './R025_SetState.js'; function App() { return ( Start React 200! css 적용하기 ); } export default App; R025_SetState.js import React, {Compon.. 2022. 6. 27. 이전 1 2 3 4 5 6 ··· 8 다음
