상추의 IT저장소

Material UI 란?? 리액트 개발에서 쉽게 사용할 수 있는 UI 프레임워크로 다양한 디자인 요소들을 제공한다. Material UI 사용법 npm install @material-ui/icons 해당 명령어로 Material UI 설치한다. https://mui.com/material-ui/material-icons/ Material Icons - Material UI 2,100+ ready-to-use React Material Icons from the official website. mui.com 해당 페이지에서 원하는 아이콘 키워드를 검색하고 클릭하면 import 코드를 바로 복사하여 컴포넌트처럼 삽입 할 수 있다. import React from 'react' import MovieIco..

라우팅이란?웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미한다. React Router리액트안에서 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있도록 하는 라이브러리 프로젝트에 라우터 적용"npm install react-router-dom" 명령어로 라이브러리 설치route폴더안에 Home과 Detail js파일을 만들고 컴포넌트를 통해 라우트를 설정해준다.import {BrowserRouter, Routes, Route } from "react-router-dom";import Home from "./route/Home";import Detail from "./route/Detail";function App() { return ( ..

Hook 클래스형 컴포넌트에서만 사용 가능했던 state와 lifeCycle을 함수형 컴포넌트에서도 사용 가능하도록 도와준다. Hook의 규칙 1. 최상위 단계서만 호출가능 - 반복문, 조건문, 중첩된 함수 내부에서 호출하면 안된다. 2. Hook은 React 함수형 컴포넌트 안에서만 호출가능! useState() 사용법 const [변수명, set함수명] = useState(초기값); useState() 사용 예시 import React, {useState} from 'react'; function Counter(props) { const [count, setCount] = useState(0); return ( 총 {count}번 클릭했습니다. setCount(count + 1)}>클릭 ); } ex..

component- 컴포넌트는 props를 받아서 상태값(state)에 따라 DOM을 호출한다.- 컴포넌트는 함수형과 클래스형으로 나뉜다. 둘의 차이점은 함수형 컴포넌트에서는 상태값과 LifeCycle을 가질 수 있는지 없는지의 여부다.- 리액트 버전 16.8 버전부터 Hook이 등장하면서 함수형 컴포넌트에서도 상태값과 LifeCycle을 사용할 수 있게 되었다. 함수형 컴포넌트import React from 'react';function FunctionComponent() { return( Function Component입니다. );}export default FunctionComponent; 클래스형 컴포넌트import React, {Component} from 'react';class C..

리액트 프로젝트를 만들기 위해서는 Node.js와 npm이 반드시 먼저 설치되어야 한다. npx create-react-app 프로젝트 해당 명령어를 활용하여 react를 설치해준다 npm start 해당 프로젝트에 들어가서 해당명령어로 프로젝트를 실행해주면 3000번 포트로 리액트 프로젝트가 실행된다.