짱뚱짱.log

🟢 리액트는 효율적으로 컴포넌트를 렌더링하고 관리하는 것이 중요 => 설계가 중요하다.📢배열에서 key👉🏻 리액트에서 배열(array)을 렌더링할 때, 각 항목에 고유한 key를 설정.👉🏻 key는 배열이 업데이트, 삭제 또는 추가될 때 효율적인 렌더링을 가능하게 함. => key를 이용해 어떤 항목이 변경, 추가 또는 제거되었는지 빠르게 인식users.map((u,i)=>( ))🟢 key가 없으면 리액트는 배열 항목의 변경 사항을 제대로 추적X => 성능 저하.     - 배열을 렌더링할 때는 항상 고유한 key를 지정 📢useRef()👉🏻 useRef()로 컴포넌트 안의 변수 만들기    - 컴포넌트에서 특정 DOM을 선택할 때 사용     - 컴포넌트 안에서 조회, 수정을 할..

//Color.jsximport React, { useState } from 'react';const Color = () => { // input 값으로 색을 입력하면 해당 색으로 변경하는 useState 생성 const [ color, setColor ] = useState(""); const [ color2, setColor2 ] = useState(""); return ( Color Change Example {setColor(e.target.value)}}/> {setColor2(color)}}>set );};export default Color;/////////////////////..

서버 명령어를 치기 위해 간단한 cmd나 bash명령어 정도는 알아두면 좋음.#####cmd명령어#전체 폴더 값 보기dir#폴더 이동cd 폴더명 #d드라이브로 이동d: #상위폴더 이동cd..#####리액트 run#리액트 폴더에서 start해야 됨.cd test-app#리액트 서버 시작npm start#종료ctrl+c 또한 리액트는 localhost:3000번 포트를 사용한다.크롬에 localhost:3000이라고 치면 리액트 애플리케이션이 브라우저에 로드됨. 📢 리액트 기본 개념⬛ 리액트(React)는 싱글 페이지 컴포넌트 방식으로, 하나의 페이지에서 여러 컴포넌트를 렌더링한다.    👉🏻 컴포넌트는 대문자로 시작하는 걸 원칙으로 하고, 재사용성과 확장성이 뛰어남.⬛ React에서는 JSX(Ja..