react23 함수형 컴포넌트 사용하기 함수형 컴포넌트 사용하기 함수형 컴포넌트는 클래스형 컴포넌트와 달리, state가 없고 생명주기 함수를 사용할 수 없다. 상위 컴포넌트에서 props와 context를 파라미터로 전달받아 사용하고 render() 함수가 없으므로 return만 사용해 화면을 그려준다. 예제코드 App.js import React from 'react'; import './App.css'; import FunctionComonent from './R030_FunctionComponent.js'; function App() { return ( Start React 200! css 적용하기 ); } export default App; R030_FunctionComponent.js import React from "react";.. 2022. 6. 28. shallow-equal 사용하기(class형 컴포넌트) shallow-equal 사용하기 shallow-equal 패키지는 PureComponent에서 state 값의 변경을 비교하는 것과 동일한 기능을 하는 함수를 제공한다. shallowEqualArrays() 함수를 사용하면 문자열과 배열은 값만 비교한다. 객체는 PureComponent와 동일하게 참조 값을 비교한다. 명령 프롬프트를 연 후 설치경로로 이동하고, npm install shallow-equal 명령어로 shallow-equal 패키지를 설치한다. 예제코드 App.js import React from 'react'; import './App.css'; import Shallowequal from './R029_ShallowEqual.js'; function App() { return ( S.. 2022. 6. 27. 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. 이전 1 2 3 4 ··· 6 다음
