Functional Component2 [React] 더보기 기능과 성능 개선 해당 페이지는 Component', 'PureComponent, Functional Component에 대해서 rerender 관련해서 정리하고 있습니다. React에서 더보기 기능을 구현할 때 기존에 보여지고 있던 리스트는 다시 렌더링을 하면 안됩니다. 각 컴포넌트로 구현했을 시에 render 수가 어떻게 되는지 예제를 통해 이해해봅시다. 예제 import React, { Component } from 'react'; import Item from './components/Item'; let index = 0; class App extends Component { state = { items: [] } componentDidMount() { this.addLi.. 2019. 4. 9. [React] Stateless Component React에서 component 내부에서 state를 사용하지 않는 component. 즉, 리렌더링이 다시는 일어나지 않는 component 같은 경우 함수형 컴포넌트(Functional Component, Stateless Component)를 이용하여 구현하면 아주 쉽다. 구현방법 import React from 'react'; const Hello = () => ( hello ); export default Hello; 기본적인 구현방법은 위와 같다. 변수에 함수를 선언해주면 되며, 함수 내부에서는 화면에 보여질 JSX를 작성해 주면 된다. props 사용하기 함수형 컴포넌트에서도 부모에게서 전달받은 props를 사용할 수 있다. import React from 'react'; const Hell.. 2018. 11. 30. 이전 1 다음
