DH의 개발 공부로그

useState() React Hooks이 나오기 이전 함수형 컴포넌트에서는 상태값을 관리 할 수가 없었습니다. 상태값을 관리하기 위해서는 함수형 컴포넌트가 아닌 class 기반의 클래스 컴포넌트를 작성해야 했습니다. 그러나 React 16.8 버전부터 Hooks라는 기능이 추가가 되면서 함수형 컴포넌트에서도 상태값을 관리할 수 있게되었습니다. 그것을 가능하게한 것이 Hooks중 하나인 useState() 입니다. 간단하게 count해주는 web을 만들어 보겠습니다. useState() 사용법 0. 전체코드 See the Pen React useState() by Shape2ee (@shape2ee) on CodePen. import React,{ useState } from 'react'..

CRA(Create-React-App) 이란? 리액트 프로젝트를 시작하는데 필요한 개발 환경 세팅을 쉽고, 간단하게 구축해주는 것입니다. https://create-react-app.dev/docs/getting-started/ ​ CRA 명령어 Create React App을 사용해 스캐폴딩 된 프로젝트는 다음의 4가지 명령어를 제공 · start → React 프로젝트 개발 서버를 시작 · build → 배포를 위해 앱을 정적(Static) 파일로 번들(Bundle) · test → 테스트 러너(Test Runner)를 시작 · eject → 사용자 정의 구성(예: Webpack)을 직접 수행할 수 있도록 프로젝트를 준비 ​ ​ CRA 사용법 1. npx create-react-app 프로젝트명(카멜..

0. 웹팩 데브 서버 생성 & 핫 리로딩 설정 react를 직접 개발환경을 설정해주고 보면 작업을 할때마다 확인을 위해 계속 빌드를 반복해야하는 문제를 해결하기 위해 웹팩 데브 서버를 생성하고 핫 리로딩 설정을 하는 것 입니다. 1. react-refresh 및 plugin 설치 npm i -D react-refresh @pmmmwh/react-refresh-webpack-plugin 2. 개발용 서버(webpack-dev-server) npm i -D webpack-dev-server 3. packgage.json script에 명령어 수정 "script": { "dev": "webpack server --env devrlopment", }, 4. webpack.config.js 수정 const pat..

※ 노드가 깔려있어야 합니다. 웹팩을 쓰는 이유 여러개로 나누어져 있는 컴포넌트, 즉 파일들을 하나의 파일로 합쳐서 파일의 수를 줄여 효율적으로 관리할 수 있게 해주기 때문이다. 1. package.json 생성 npm init 2. react 설치 npm i react react-dom 3. webpack 설치 npm i -D webpack webpack-cli -D: 실제서비스에서는 필요가 없고 개발환경에서만 사용할 때 적용하는 코드 "dependencies": { // 실제 서비스에서 사용하기 위한 것들 "react": "^18.2.0"7, "react-dom": "^18.2.0" }, "devDependencies": { // 개발환경에서만 사용할 것들 "webpack": "^5.75.0", "w..

1. Object shorthand assignment let name="shape"; let age = 20; let person={ name:name, age:age } console.log(person) key 이름과 value에 변수 이름과 같으면 단축 가능 let person={ name, age } 2.Destructuring (객체를 분해해서 가져오다) let person ={ name:"shape", age:20 } /* let name = person.name let age = person['age'] */ let {name, age} = person 많이 사용되는 방식의 문법이며, 특히 React Hook인 useState와 함께 사용이 많이 된다. 객체뿐만 아니라 배열에서도 사용가능 ..

React란? • React 는 UI 를 구현하는 JavaScript 라이브러리 • 웹 앱(Web App) 또는 네이티브 앱(Native App) • 유지보수를 쉽게 , DOM 관리 • 성능최적화 쉽게 • 컴포넌트에 집중 ​컴포넌트 컴포넌트는 UI 를 구성하는 조각(piece). 독립적으로 분리되어 재사용 됨을 목적. React 앱에서 컴포넌트는 개별적인 JavaScript 파일로 분리되어 관리. (예: Header, HeaderTitle, Wrapper, List, ListItem 컴포넌트) ​ 함수형 컴포넌트 컴포넌트 외부로 속성(props)을 전달 받아 어떻게 UI 를 구성해야 할지 설정하여 React 요소(JSX 를 Babel 이 변환 처리)로 반환하는 문법 구문을 사용하는 컴포넌트. ​ JSX ..