React 썸네일형 리스트형 React 18 알아보기 목차사전 준비주요 기능자동 배치동시성useTransitionSuspense새로운 훅useIduseDeferredValue 사전 준비 React 18의 새로운 기능을 사용하기 위해서는 createRoot를 통해 앱을 렌더해야 한다.기존의 ReactDOM.render는 deprecated 된다.※ ReactDOM의 import 경로도 달라졌으니 주의하자.// AS-ISimport React from 'react';import ReactDOM from 'react-dom';ReactDOM.render( , document.getElementById('root')); // TO-BEimport React from 'react';import ReactDOM from 'react-dom/clien.. 더보기 Create-React-App에 대해 알아보자 https://create-react-app.dev/👆공식 사이트Create-React-App이 뭘까?여러 패키지를 조합하여 리액트 개발 환경을 구축해준다. (바벨, 웹팩, 테스트, ES6+, CSS 후처리 등)줄여서 cra라고 부르기도 한다.기본 디렉토리 구조npx create-react-app cra-test위 명령어로 프로젝트를 생성하면, 아래와 같은 디렉토리 구조가 생겨난다.cra-test/ README.md node_modules/ package.json public/ index.html favicon.ico src/ App.css App.js App.test.js index.css index.js logo.svg serviceWorke.. 더보기 간단한 커스텀 훅 예제 (useInput) 1. 문제인식리액트에서 input을 사용할 때 반드시 만들어야 하는 함수가 있다.바로 input value에 따라 state값을 변경해주는 함수이다.예를들어 id 입력창과 password 입력창이 있을 때, 아래와 같이 코드를 짠다.set함수가 분리되어 있다보니 input 핸들러를 각각 만들어줘야 한다.const [id, setId] = useState('');const [password, setPassword] = useState('');const handleInputId = (e) => { setId(e.target.value);};const handleInputPassword = (e) => { setPassword(e.target.value);}; 사실 이전 방식인 클래스로 소스를 짜면 se.. 더보기 이전 1 다음
