728x90 리엑트13 immer를 사용한 불변성 유지 상태가 복잡할때 불변성을 유지하면서 업데이를 하게 되면 코드가 복잡해 지고 가독성이 저하 된다. 이때 immer라이브러리를 사용하면 좀 더 쉽게 불변성을 유지하면서 업데이트를 진행할 수 있다. immer라이브러리의 핵심은 불변성을 신경쓰지 않는것 처럼 코드를 작성하되 불변성 관리를 제대로 해주는것이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 //Example code import produce form 'immer'; const originalState = [ { id: 1, todo: '1', checked: true, }, { id: 2, todo: '2', checked: false, }, ]; //imm.. 2021. 7. 8. 컴포넌트 성능 최적화 아래의 내용은 벨로포트의 todo app의 내용을 가지고 진행한다. 10장에서 todo app만들기는 내용을 보지 않고 독자적으로 만들었기에 내 코드를 사용하지 않았다. https://github.com/velopert/learning-react/tree/master/10/todo-app/src velopert/learning-react [길벗] 리액트를 다루는 기술 서적에서 사용되는 코드. Contribute to velopert/learning-react development by creating an account on GitHub. github.com 많은 데이터 렌더링 하기 우선 App.js의 코드를 다음과 같이 수정해 보자 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .. 2021. 7. 6. Component styling 일반 css 그냥 디폴트로 들어 있는 css이다. 사용법은 가장 초기의 src/App.js, App.css를 보면 된다. Css를 사용할때 가장 중요한것은 css클래스를 중복되지 않게 만드는 거다. 이는 다음과 같은 두개의 방식으로 실천할 수 있다. 1. 규칙있는 이름 src/App.js초기 로직을 보면 className이 컴포넌트이름-클래스(ex.App-header)형태로 되어 있다. 또 한 BEM naming같은 것을 사용하는 것도 방법이다. http://getbem.com/naming/ BEM — Block Element Modifier BEM is a highly useful, powerful, and simple naming convention that makes your front-end co.. 2021. 7. 1. Hooks hooks는 리액트 v16.8에서 도입된 기능으로 함수형 컴포넌트에서 상태 관리를 할 수 있는 useStat, 렌더링 직후 작업을 설정하는 useEffect등의 기능을 제공한다. useState useState는 hook의 가장 기본적인 hook으로서 함수형 컴포넌트가 가변적인 상태를 가지게 해준다. 하나의 useState는 하나의 상태만 관리할 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 import React, {useState} from 'react'; const Info = () => { const [name, setName] = useState(''); const [nickname, setN.. 2021. 6. 29. 이전 1 2 3 4 다음 728x90
