본문 바로가기

State7

리액트 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.
리액트 배열에 데이터 삭제하기 state에 선언된 배열을 삭제하는 하는 방법은 다음과 같습니다. 1) 삭제하고자 하는 배열 데이터의 key 값을 조회합니다. 2) 배열 데이터를 탐색하여 key값과 불일치되는 값을 state에 갱신합니다. 1)의 경우, 삭제하고자 하는 데이터의 onClick 이벤트로 해당 key값을 인자로 넘깁니다. function Animal({animal,onRemove}){ return( {animal.id} : {animal.animalType} {animal.sound} onRemove(animal.id)}>삭제 ); } 2)의 경우, 상위 컴포넌트에서 filter메서드를 사용하여 animal.id와 다른 값을 state에 세팅합니다. //animals state에 데이터 삭제 const onRemove=(i.. 2022. 5. 14.
리액트 배열에 데이터 추가하기 다음은 동물 종류와 동물 울음소리를 지정한 배열입니다. 이를 state에 animals 라는 이름으로 저장하겠습니다. //animals state, 동물과 울음소리가 들어있음 const [animals, setAnimals] = useState([ { id : 1, animalType : '고양이', sound : '야옹' }, { id : 2, animalType : '강아지', sound : '멍멍' }, { id : 3, animalType : '닭', sound : '꼬꼬댁' } ]); input을 이용하여 데이터를 추가하기 위해 다음과 같은 메서드를 선언하였습니다. //animals state에 새롭개 생성된 animal 객체 추가 const onCreate=()=>{ const animal =.. 2022. 5. 13.
리액트 기초 : 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.
리액트 기초 : state 1) state vs props props는 사용자가 컴포넌트를 사용하는 입장 state 는 props의 값에 따라 내부 구현에 필요한 데이터 2) 사용 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={ subject:{title:"WEB",sub:'World'} } } render(){ return ( ); } } export default App; 생성자에서.. 2022. 5. 2.
반응형

티스토리툴바