본문 바로가기

props5

리액트 useMemo와 useCallback 컴포넌트의 렌더링은 함수가 실행 될때마다 내부에 선언되어있던 변수, 함수가 매번 다시 선언됩니다. 컴포넌트는 state가 변경되거나, 부모에게서 받는 props가 변경되었을 때마다 리랜더링 됩니다. useMemo와 useCallback은 왜 사용할까? 하위 컴포넌트는 props로 넘겨 받는 인자들 중, 하나라도 변경될때마다 리랜더링 되는데, 이 때, 기본적으로 하위 컴포넌트의 모든 함수들이 실행되게 됩니다. 만약 컴포넌트 내 함수의 개수가 많고, 처리해야하는 데이터도 많아진다면 이는 성능 저하로 이루어질 수 있습니다. 이를 해결하는 방법으로 리액트는 useMemo와 useCallback의 사용을 권하고 있습니다. useMemo는 메모리제이션을 사용하여 값을 저장해놓고 useCallback을 사용하여 함수.. 2022. 5. 16.
리액트 배열에 데이터 수정하기 배열 데이터를 수정하기 위해서는, 하위 컴포넌트에서 props로 변경할 state 객체와 setter를 받아 변경할 수 있습니다. 이번 실습에서는 동물들의 이름과 울음소리를 변경해보겠습니다. 0) 준비사항 animal 객체는 id, animalType, sound로 이루어져 있었습니다. 이 곳에 mode를 추가하여 수정 모드로 돌입하도록 표시하도록 하겠습니다. App 컴포넌트 //animals state, 동물과 울음소리가 들어있음 const [animals, setAnimals] = useState([ { id : 1, animalType : '고양이', sound : '야옹', mode : false }, { id : 2, animalType : '강아지', sound : '멍멍', mode : fa.. 2022. 5. 15.
리액트 기초 : Event(2) 이번엔 상위 컴포넌트에서 정의한 메서드를 하위 컴포넌트에서 실행시켜보겠다. 메서드의 경우에도 props를 이용하여 전달받을 수 있다. 1) 상위 컴포넌트의 메서드 하위 컴포넌트에서 실행 상위 컴포넌트에서 hihihi를 alert하는 메서드를 만들고 이를 하위 컴포넌트에서 실행시키고자 한다. App.js /*----중략---*/ /*----중략---*/ Subject.js /*----중략---*/ return ( {this.props.title} {this.props.sub} ); /*----중략---*/ App.js에서 onChangePage라는 function이 alert이 되도록 정의하고, Subject.js에서 클릭 시 props를 이용하여 해당 메서드를 호출하였다. 결과 상단의 WEB 글자를 클릭.. 2022. 5. 4.
리액트 기초 : Event(1) 리액트는 state의 값이 변경되면 render를 재호출하여 유저가 보이는 html을 다시 생성한다. 이번 실습 내용은 mode의 값에 따라 컴포넌트의 랜더링 결과가 변경하도록 하는 것이 목적이다. 1. 클릭 할 때마다 span의 내용이 변경되는 버튼 import './App.css'; import { Component } from 'react'; import Subject from './Subject'; import Toc from './Toc'; import Content from './Content'; class App extends Component { constructor(props){ super(props); this.state={ mode : 'read', subject:{title:"WEB.. 2022. 5. 3.
리액트 기초 : Props Props은 리액트에서 속성값을 나타내는 키워드이다. 이를 이용하면 다른 컴포넌트에 변경되는 값을 가져올 수 있다. 1) Subject 컴포넌트에 정의하고 싶은 속성명과 값을 지정한다. import './App.css'; import { Component } from 'react'; import Subject from './Subject'; import Toc from './Toc'; import Content from './Content'; class App extends Component { render(){ return ( ); } } export default App; 2) Subject 컴포넌트에서 {this.prop.속성명}을 사용하여 해당 값을 사용한다. (jsx 문법) import './A.. 2022. 5. 1.
반응형

티스토리툴바