basic/React.js (42) 썸네일형 리스트형 form import React, { useState } from 'react' function LoginPage() { const [Id, setId] = useState(''); const [Pwd, setPwd] = useState(''); const onIdHandler = e => { setId(e.currentTarget.value) } const onPwdHandler = e => { setPwd(e.currentTarget.value) } const onSubmitHandler = e => { e.preventDefault(); alert(`${Id} // ${Pwd}`) } return ( 아이디 비밀번호 로그인 ) } export default LoginPage input여러개 관리하기 http.. React.js public directory file link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> 리액트에서 바로 css 적용하는 법 style={{ display: 'flex' }} 태그 안에 이런식으로 넣어주면됨 코드스플리팅 자바스크립트로 애플리케이션을 개발하면 하나의 파일에 수 많은 로직이 들어가는 경우가 많은데 그렇게 되면 파일이 커지면 커질 수록 페이지를 로딩하는데 오래 걸리게 된다. 따라서 지금 바로 필요한 코드와 나중에 가져와도 되는 코드로 스플릿하여 페이지의 로딩 속도를 개선하는 것이다. [React.js] Error: Invariant failed: You should not use <Link> outside a <Router> error 문장 그대로 Router엘리먼트 밖에서 Link를 사용해서 그런다 이와 같이 안에 써주면 문제 해결 [React.js] SPA Single Page Application: 한 페이지로 이루어진 앱 기존의 웹은 다른 페이지로 이동할 때마다 서버에서 리소스를 받아와 다시 화면을 그렸다면 SPA는 변경이 있는 부분만 라우팅을 통해 업데이트 시켜준다 리액트 라우팅 라이브러리의 종류 - React-Router - Reach-Router - Next.js SPA의 단점은 앱의 규모가 커지면 자스 파일이 너무 커진다는 점 => 페이지 첫 로딩시 사용자가 사용하지 않을 페이지의 스크립트도 다 불러오기 때문 따라서 성능을 위해 얼마나 효율적으로 코드를 짜냐가 중요하다는 것 또 SEO 검색 안된다는 점, 자스가 실행되기 전까지 빈페이지 이므로 검색엔진에 노출되기 힘듬 => SSR으로 해결할 수는 있다. [React.js] 불변성 immer 리액트에서 불변성을 유지하면서 상태를 업데이트 하는 것은 중요하다. 규모가 크고 객체의 구조가 깊은 프로젝트에서 배열이나 객체를 복사하고 새로운값을 덮어 씌우는 등의 방식으로 처리해 나가다 보면 불변성을 유지하면서 상태를 업데이트 하는 것이 힘들다. 그럴 경우를 위한 immer 모듈이 있다. npm i immer [React.js] react-virtualized로 컴포넌트 최적화하기 npm i react-virtualized github.com/bvaughn/react-virtualized/tree/master/docs#documentation bvaughn/react-virtualized React components for efficiently rendering large lists and tabular data - bvaughn/react-virtualized github.com List의 틀이 되는 부분 import { List, AutoSizer } from 'react-virtualized' //AutoSizer 부모의 크기를 받아옴 function TodoList(props) { const rowRenderer = useCallback( ({ index, key, sty.. 이전 1 2 3 4 5 6 다음