민톨이의 개발기록장

예제 import { useState, useRef, useEffect } from 'react'; import './App.css'; import MyInput from './Myinput'; export default function App() { //초기값 설정 const [firstName, setFirstName] = useState('테일러'); const [lastName, setLastName] = useState('스위프트'); const [toggleForm, setToggleForm] = useState(true); function handleFirstName(e) { setFirstName(e.target.value); } function handleLastName(e) { setL..

스프레드 문법으로 props전달 -부모의 모든 props를 자식 컴포넌트에 전달할 경우 props객체로 받고 자식컴포넌트에 스프레드 문법으로 전달 => 스프레드[Spread] 문법이란? 어떤 객체 안에 있는 요소들을 객체 바깥으로 꺼내주는 것 ```js // utils.js export function getImageUrl(person, size = 's') { return `https://i.imgur.com/${person.imageId}${size}.jpg`; } ``` ```js // Avatar.jsx import { getImageUrl } from './utils.js'; export default function Avatar({ person, size, border }) { return (..

부모컴포넌트에서 props를 통해 자식 컴포넌트로 정보전달 부모에서 props 객체전달하고 자식 컴포넌트에서 구조분해할당하여 같은 이름으로 받음 props는 변경불가하며 상호작용이 필요한 경우 state 사용 컴포넌트 렌더링시 마다 새로운 props를 받음 // App.jsx import { getImageUrl } from './utils.js'; function Avatar({ person, size }) { return ( ); } export default function Profile() { return ( ); } // utils.js export function getImageUrl(person, size = 's') { return `https://i.imgur.com/${person.im..

컴포넌트에서 렌더링 로직과 마크업을 한번에 표현하여 return 하나의 부모 태그로 감싸야하며 부모태그를 쓰지않을 경우 프레그먼트 사용 jsx내부에서 여러 객체를 하나의 배열로 감싸서 return하는 것과 같음 self closing 태그도 형태로 닫아야함 태그 속성명은 카멜케이스이며 예약어인 경우 className, htmlFor 사용 예제) html을 jsx로 변환하여 TodoList컴포넌트 만들기 Hedy Lamarr's Todos 새로운 신호등 발명 영화 장면 리허설 스펙트럼 기술 개선 체크박스 => 이 html을 jsx로 변환하면? import './App.css'; export default function TodoList() { return ( Hedy Lamarr's Todos 새로운 신호..

컴포넌트: 재사용 가능한 UI요소, 마크업으로 뿌릴 수 있는 자바스크립트 함수이므로 재사용이 아니더라도 기능별 컴포넌트(함수)로 생성하여 유지보수가 쉽도록 해줌 컴포넌트 이름은 일반함수와 구별위해 파스칼표기법, jsx마크업을 반환하는 함수 return 뒤에 jsx로 마크업, 한줄 아닐 경우 ()로 묶어야함 jsx는 self closing 태그 형식 // App.jsx function Profile() { return ; } ```js return ( ); ``` 컴포넌트 사용 다른곳에서 사용하지않고 서로 밀접하게 관련된 경우 같은 파일안에 컴포넌트 생성 Gallery는 부모컴포넌트, Profile은 자식컴포넌트 컴포넌트 안에서 다른 컴포넌트 정의 불가, 최상위 레벨(파일)에 정의 function Prof..

- body 하단에서 main.jsx 모듈 연결하여 시작, jsx는 리액트 컴포넌트 확장자 // index.html // main.jsx import React from 'react' import ReactDOM from 'react-dom/client' // 상대경로로 App 컴포넌트 가져오기 import App from './App.jsx' import './index.css' // 엄격모드이므로 개발모드에서만 두번 렌더링하여 useEffect 스트레스 테스트 ReactDOM.createRoot(document.getElementById('root')).render( , ) App.jsx root컴포넌트이며 메인페이지 역할 컴포넌트 파일명은 파스칼 케이스(첫단어 대문자) // App.jsx impor..

react-app 프로젝트 폴더 생성후 열기 nodejs v18이상, 터미널(vscode 하단에서 위로 드래그) node -v로 확인 크롬익스텐션: react devtools, ES7+ React/Redux/React-Native/JS snippets 설치 npm create vite@latest ./ 현재폴더에 템플릿 세팅 Select a framework: React, Select a variant: JavaScript npm i - package.json의 의존성 패키지 설치 npm run dev - 로컬웹서버실행후 ctrl + 로컬주소클릭 index.css가 공통 css이므로 공통 css 복사, App.css 내용 삭제 components 하단 > General > Highlight updates..