React/기초19 [React] MUI의 useTheme와 useMediaQuery로 구현하는 반응형 웹 (feat. 그 외 방법) 업무 할 때 Material-UI(MUI)의 useTheme와 useMediaQuery를 사용하여 반응형 웹을 구현했었는데 그 부분을 조금 정리해보려 한다.useTheme 이란? MUI(Material-UI)에서 제공하는 훅으로, 현재 테마에 접근할 수 있게 해 준다.테마는 색상, 간격 등 UI 요소의 스타일을 정의하며, MUI는 기본적으로 테마를 사용하여 UI 구성 요소의 스타일을 일관되게 관리할 수 있도록 돕는다.이 훅을 사용하면 현재 테마에 정의된 색상, 타이포그래피, 간격 등의 스타일 속성에 쉽게 접근할 수 있어, 사용자 인터페이스를 더 쉽게 커스터마이즈 할 수 있다.import { useTheme } from '@mui/material/styles';import React from 'react.. 2024. 10. 12. React 상태 관리 Recoil (feat. useState와 차이점) 그동안 리액트 상태 관리는 useState로 했었는데 이번에 개인 프로젝트를 하면서 Recoil를 써보려고 차근차근 알아가는 중이다. Recoil 이란? Recoil은 페이스북에서 만든 React 전역 상태관리 라이브러리이다.Recoil 설치 및 사용법 1. Recoil 설치// npm 사용 시npm install recoil// yarn 사용 시yarn add recoil2. RecoilRootRecoil은 React의 상태 관리 라이브러리이기 때문에 (index.js 또는 App.js 파일에서) RecoilRoot로 애플리케이션 전체를 감싸야한다.RecoilRoot는 상태 관리를 위한 컨텍스트를 제공한다.// index.js import "antd/dist/antd.css"; // Ant Desig.. 2024. 10. 8. npm i create-react-app 와 npx create-react-app my-app 의 차이점 npm i create-react-app create-react-app 도구를 내 컴퓨터에 설치한다.예전에는 이 방법으로 도구를 설치한 후에 React 프로젝트를 만들었지만 현재는 이 방법을 사용하는 것을 권장하지 않는다.npm i에서 i는 install의 약자이며, 패키지를 설치하라는 명령을 의미한다.(npm install create-react-app은 npm i create-react-app과 동일한 의미)npx create-react-app my-appcreate-react-app 도구를 임시로 다운로드해서 바로 실행한다.my-app은 만들고 싶은 프로젝트 이름을 적어주면 된다.npx를 사용하면 매번 설치할 필요 없이 최신 버전으로 프로젝트를 쉽게 만들 수 있다.간단 요약npm i create-r.. 2024. 10. 6. DOM 이란? & React와 ReactDOM 차이 🔥 DOM 이란?문서객체모델(Document Object Model)이다문서 객체란? : 이나 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만드는 것(HTML 문서를 객체화한 것)을 문서 객체라고 한다DOM은 HTML, XML 문서의 프로그래밍 interface이며, 개발자가 작성해 놓은 HTML문서를 브라우저가 해석해서 만들어 놓은 것이다쉽게 말하면 DOM은 Javascript로 html을 조작하기 위해 존재한다 그렇다고 해서 html을 직접 조작하는 것은 아니고, dom을 접근해 조작함으로써 html에 변화가 일어난다DOM 접근document.querySelector('title')DOM 조작document.querySelector('title').i.. 2024. 7. 13. 리액트 실행 흐름 [ Index.js, App.js, Index.html ] 🔥 3개의 파일은 creat-react-app 하면 자동으로 파일이 생성된다🔥 public 폴더 안에 index.html 파일이 src 폴더 안에 App.js, index.js 파일이 있다 🔥 index.js제일 상위자이며 가장 먼저 react에서 실행되는 파일이다메인 프로그램이다// 필요한 부분만 작성import React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render(, document.getElementById('root')); 🔥 App.js컴포넌트를 정의하는 프로그램이다// 필요한 부분만 작성function App(){ // App() >> 'JSX문법' return .. 2024. 7. 12. create-react-app(CRA) 정리 ✏️ create-react-app이란?React앱을 간편하게 만들 수 있도록 자동으로 빌드해 주는 Boiler Plate이다복잡한 초반세팅 없이 간단하게 React 프로젝트를 구성할 수 있다create-react-app를 축약해 CRA이라고도 부른다✏️ create-react-app 장점개발자들이 많이 사용하는 라이브러리 등이 대부분 세팅되어 있어서 이후 필요한 라이브러리만 추가로 설치해 주면 된다✏️ create-react-app 단점웹팩(Webpack), 바벨(Babel), 린트(Eslint) 등 세부 설정이 package.json 안에 숨겨져 있어 구성요소들을 세부 설정이나 수정하기 위해서는 *eject 하여 숨겨진 설정들을 밖으로 꺼내야 한다는 것이 익숙하지 않으면 다소 힘들고 어렵다는 점.. 2024. 7. 8. 이전 1 2 3 4 다음 728x90