공부기록용

import import React from "react"; 여기서 `React`는 React 라이브러리에서 내보내는 기본 모듈입니다. 대부분의 경우, React 라이브러리에서 `React` 객체를 사용하여 React 컴포넌트를 생성하고 JSX를 렌더링하는 데 필요한 기능을 사용할 수 있습니다. 또 구조 분해 할당을 사용하여 필요한 기능을 선택적으로 가져올 수도 있습니다. 예를 들어, `useState`와 `useEffect` 훅을 가져오려면 다음과 같이 작성할 수 있습니다: import React, { useState, useEffect } from "react"; > `React`와 함께 `useState`와 `useEffect`를 현재 파일에서 사용할 수 있도록 가져옵니다. 이렇게 하면 `React..

🔴컴포넌트 분리(같은 파일내에서) 🔴컴포넌트 분리(파일 분리로) 삭제기능 분리 import React, { useState } from "react"; // useState를 import해주는 것 확인 import './App.css'; const App = () => { const [users, setUsers] = useState([ { id: 1, age: 30, name: "송중기" }, { id: 2, age: 24, name: "송강" }, { id: 3, age: 21, name: "김유정" }, { id: 4, age: 29, name: "구교환" }, ]); // 아래 return에서 받아 오는, input안에 입력되는 값들이 바로바로 셋팅되는 것 // 이름 const [name, set..

🔴state 생성, 연결 🔴입력 값 추가하기 🔻코드뜯어보기 🔴입력 값 삭제하기 // ./src/App.js import React from "react"; import './App.css'; const App = () => { // Javascript를 쓸 수 있는 영역 // 함수가 시작되는 부분 바로 밑 // return문 위에 const arr = ['감자', '고구마', '오이', '가지', '옥수수']; return( // retur문 바로 밑은(return문 안에 쓰는 것) html 같이 생긴 부분을 작성하는 부분 // html같이 생겼지만 JSX문법 이라고 함 // JSX : Javascritp와 XML(html이라고 생각)의 합성어 // Javascript적인 요소를 쓰고 싶다면{ }안에 작..

map 원래 데이터를 가공하여 출력하는 방법 리액트에서의 map // ./src/App.js import React from "react"; import './App.css'; const App = () => { return ( 감자 고구마 오이 가지 옥수수 ); }; export default App; ▼ map를 사용하여 리팩토링해보기 /*App.css*/ .app-style { padding: 100px; display: flex; gap: 12px; } .component-style { width: 100px; height: 100px; border: 1px solid green; border-radius: 10px; display: flex; align-items: center; justify-..

// src/App.js import "./App.css"; import { useState } from "react"; function App() { const [count, setCount] = useState(0); const minusBtnClickHandler = () => { const newminusCount = count -1; setCount(newminusCount); } const plusBtnClickHandler = () => { const newPlusCount = count +1; setCount(newPlusCount); } return ( {count} -1 +1 ); } export default App; // src/App.js import "./App.css"; imp..

Component 컴포넌트는 리액트의 핵심 빌딩 블록 중 하나이니다. 즉 리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구성된다. 컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어준다. 컴포넌트란 리액트의 핵심 빌딩 블록 중 하나로, UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체이다. 리액트 컴포넌트가 선언체라는 개념은 아주 중요하다. 리액트의 컴포넌트기반 개발 이전에는 브라우저에서 동적으로 변하는 UI를 표현하기 위해 직접 DOM 객체를 조작하는 명령형 프로그래밍 방식으로 구현했었다. 명령형은 어떻게(How) 를 중요시여겨서 프로그램의 제어의 흐름과 같은 방법을 제시하고 목표를 명시하지 않는 형태입니다. 선언형은 무엇(What)🔻 을 중요시 여겨서 제어..