Research/React40 hook으로 컴포넌트 일괄 업데이트하기 // Using hooks import './App.css'; /** * 'use'로 시작하는 것 모두 Hook에 속함 * - useState는 빌트인 Hook. 외부에서 hook 가져올 수도 있음 * - 하위 버튼에서 업데이트 한 것을 상위에서 전체 컴포넌트로 적용시키는 것을 lifting state up 이라 부름 */ import { useState } from 'react'; function App() { const [sentenceCount, setSentenceCount] = useState(0); function handleClick() { setSentenceCount(sentenceCount + 1); } return ( Sentence counters ); } function MyBut.. 2023. 10. 18. useState로 컴포넌트 update하기 // Updating the screen import './App.css'; import { useState } from 'react'; function MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return {count} sentences; } function App() { return ( You Collected ); } export default App; 2023. 10. 18. React 배열 렌더링하기 // Rendering lists import './App.css'; const students = [ { name: 'John', height: 188, id: 'stu1' }, { name: 'Sujan', height: 158, id: 'stu2' }, { name: 'Rabo', height: 168, id: 'stu3' }, ]; function App() { const listStudents = students.map((student) => { return ( 170 ? 'red' : 'green' }} > {} {student.name} ); }); return {listStudents}; } export default App; 2023. 10. 18. React build 명령어(Create-React-App, Vite) React란 유저 인터페이스 위한 자바스크립트 라이브러리 격리성, 재사용성, 빠른 속도 Facebook이 개발했고, 경쟁자로 Angular, Vue, Svelte 리액트 = 레고블럭들 = Components 컴포넌트는 독립(independent)적이고 재사용(reusability)성이 있고 빠르다(speed) React app 빌더 보통 Create-React-App 많이 씀 Vite이 더 좋음 Create-React-App으로 빌드하기 - npx create-react-app my-app - npx create-react-app@latest my-app Vite으로 빌드하기 npm create vite@latest my-react-app -- --template react 2023. 10. 17. 이전 1 ··· 3 4 5 6 7 8 9 10 다음
