Monsters-Rolodex 4 | Destructuring | Optimizations

코드 정리하기 

 

1. 함수 vs 익명함수 

 

onChange에 익명 함수가 바로 호출하게 되어있다.

 

 

 

onChange 안 event는 업데이트 되지만 안에든 익명 함수가 업데이트 되는 것은 아니다.

함수를 따로 빼서 처음 클래스 초기설정할 때 이 함수를 한번만 만들고 나중에 호출만 하면 된다. 

class에 attached 되어 있기에 this를 써준다. 

 

 

 

 

2. Destructuring | this.state를 빼기 

 

destructuring 하기 

render() 함수 안에 object로 적어준다. 

this.state를 쓰고 있는 이름들 monsters, searchField를 { } 넣어주고

아래있는 this.state를 지워준다.

 

this을 쓰고 있는 단어를 찾아 똑같이 만든다. 

 

 

바꾼 후 

 

 

---

 

 

import { Component } from 'react';

import './App.css';

class App extends Component {

constructor() {

super();

this.state = {

monsters: [],

searchField: ''

};

}

componentDidMount() {

fetch('https://jsonplaceholder.typicode.com/users')

.then((response) => response.json())

.then((users) => this.setState(

() => {

return { monsters: users }

}

));

}

onSearchChange = (event) => {

const searchField = event.target.value.toLocaleLowerCase();

this.setState(

() => {

return { searchField };

},

)

}

render() {

console.log('render');

const { monsters, searchField } = this.state;

const { onSearchChange } = this;

const filteredMonsters = monsters.filter((monster) => {

return monster.name.toLocaleLowerCase().includes(searchField);

});

return (

<div className="App">

<input clasName='search-box'

type='search'

placeholder='Search Monsters'

onChange={onSearchChange}

/>

{filteredMonsters.map((monster) => {

return <div key={monster.id}>

<h1>{monster.name}</h1>

</div>;

})}

</div>

);

}

}

export default App;