공부기록용

🔴CSS-in-Js 🔴styled-components CSS-in-Js CSS-in-JS방식이란, 단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식입니다. 순수한 CSS코드를 우리가 아니라, 자바스크립트를 이용해서 CSS코드를 만들어내는 것 styled-components styled-components는 우리가 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지 패키지란, React에는 없는 기능이지만 우리가 추가로 가져와서 사용할 수 있는 써드파티 프로그램. 패키지들은 누군가에 의해 만들어진 것으로 npm에 모여있다. yarn 에서 styled-components 설치하기 vscode 터미널에서 아래 명령을 입력해서 패키지를 설치 yarn add ..

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적인 요소를 쓰고 싶다면{ }안에 작..

// 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)🔻 을 중요시 여겨서 제어..