728x90 useState3 컴포넌트 성능 최적화 아래의 내용은 벨로포트의 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. 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. state state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이고 컴포넌트 자신은 해당 props를 읽기 전용으로 만 사용할 수 있다. props의 값을 바꿀려면 부모 컴포넌트에서 바꾸어야 한다. 리엑트에는 (1). 클래스형 컴포넌트가 지니고 있는 state, (2).함수형 컴포넌트가 지니고 있는 useState를 통해 사용하는 state 총 두개가 있다. Class형 컴포넌트 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 30 31 32 33 34 35 36 37 38 39 40 41 import React, {Component} from 'r.. 2021. 6. 20. 이전 1 다음 728x90
