es모듈시스템을 사용하기위해서 package.json 파일에 "type": "module" 추가해준다.
{
"name": "nodepkqtest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node src/index.js"
},
"author": "",
"license": "ISC",
"type": "module"
}설정후 npm run start를 하면 모듈을 사용했기때문에 에러가 발생하고 require대신 import를 사용해야한다고나온다.
ReferenceError: require is not defined in ES module scope, you can use impor
t insteadmath.js와 index.js를 es 모듈 시스템 버전으로 변경해서 작성
math.js
// module.exports = {
// add,
// sub,
// };
export { add,sub };index.js
// const {add,sub} = require("./math");
import { add, sub } from"./math.js";변경후 터미널에서 npm run start 실행하면 에러없이 실행된다.
function 앞에 export를 붙여도 가능하다.
math.js
export function add(a,b) {
return a+b;
}
export function sub(a,b) {
return a-b;
}
//디폴트 만들기
export default function multiply(a,b) {
return a*b;
}디폴트까지 불러오기
index.js
import { add, sub } from"./math.js";
//디폴트는 중괄호없이 불러올수있다.
import multiply from "./math.js";
//디폴트까지 한번에 불러올 수 있다.
import mul, { add, sub } from"./math.js";
//동작하는지 테스트해보기
console.log(add(3,4));
console.log(sub(3,4));
console.log(mul(3,4));
//mul처럼 multiply를 축약해서 불러와도 가능!
npmjs에서 randomcolor 검색복사해서 터미널로 설치하기
설치하면
added 1 package, and audited 2 packages in 3s
package.json파일에 dependencies 추가되어있다.
"dependencies": {
"randomcolor": "^0.6.2"
}
randomColor 사용하기
index.js
//라이브러리사용할때 확장자사용하지않고 이름만 명시한다.
import randomColor from "randomcolor";
const color = randomColor();
console.log(color);React
React.js 란?
- Meta가 개발한 오픈소스 JavaScript 라이브러리
- 대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어진 기술
(사용자뷰,UI특화) - 선언형 프로그래밍(자바스크립트는 명령형)->쉬운 화면 업데이트 구현
- 컴포넌트 기반 라이브러리
React의기술적인특징
-컴포넌트 기반으로 UI 표현(모듈화시켰다)
Header 컴포넌트
Header.js
Main 컴포넌트
Main.js
Footer 컴포넌트
Footer.js
-쉬운 화면 업데이트 구현->State변수이용해서 간결하게업데이트할수있다.
-빠른 화면 업데이트 처리
-Virtual DOM-> 가상의 돔을 만들어서 변화를 한꺼번에 실제돔에 업데이트해준다.
리스트만들기
index.html
<html>
<head>
</head>
<body>
<button onclick="onClick()">리스트 추가하기 3000개</button>
<ul id="ul"></ul>
<script src="./index.js"></script>
</body>
</html>index.js
// function onClick(){
// const ul = document.getElementById("ul");
// const start = Date.now();
// for(let i = 0; i<3000; i++){
// ul.innerHTML += `<li>${i}</li>`;
// }
// const end = Date.now();
// console.log(end - start + "ms");
// }
//위의 시간이많이걸리는 코드를 아래코드로 변경해서 시간축소
function onClick(){
const ul = document.getElementById("ul");
let list= "";
const start = Date.now();
for(let i = 0; i<3000; i++){
list += `<li>${i}</li>`;
}
ul.innerHTML = list;
const end = Date.now();
console.log(end - start + "ms");
}React App 생성하기
리액트 앱 생성단계
-Node.js 패키지 생성
-React 라이브러리 설치
-기타 도구 설치 및 설정
Vite
- 기본 설정이 적용된 React App 생성가능
- 차세대 프론트엔드 개발 툴
- React 공식 문서에서도 권장
reactfirst 프로젝트 생성해서 터미널에서
npm create vite@latest . 실행
React선택하고 JavaScript선택해서 React App생성
nodemodules가 없기때문에 npm패키지를 설치해야한다.
npm install 실행
설치 후 npm run dev 실행하면
서버가동되고 로컬호스트주소로 접속할 수 있다.
필요없는 vite.svg,react.svg 이미지 삭제
App.css,index.css 내용삭제
main.jsx에서 코드문제있는지검사하는 <React.StrictMode> 삭제
ESLint 설치-> 코딩스타일통일화시켜주는 툴
ESLint설정파일 .eslintrc.cjs에서
"no-unused-vars": "off",
"react/prop-types": "off",옵션 추가해준다.
function App은 컴포넌트,
Header컴포넌트 추가하기
App.jsx
function Header() { //대문자로 시작해야한다.
return (
<div>
<h1>header</h1>
</div>
);
}
function App() {
return (
<>
<Header /> //App의 자식컴포넌트
<h1>Hello React!!!></h1>
</>
);
}
export default App;
분류하기
src밑에 components 디렉토리 만들어서
Header.jsx 생성해서 옮기기
function Header() { //대문자로 시작해야한다.
return (
<div>
<h1>header</h1>
</div>
);
}
export default Header;App.jsx
//Header import해주기
import Header from "./components/Header"; //vite에서는 확장자안써줘도된다.Main,Footer까지 만들기
Main.jsx
function Main() {
return (
<div>
<h1>Main</h1>
</div>
);
}
export default Main;Footer.jsx
const Footer = () => {
return (
<div>
<h1>Footer</h1>
</div>
);
};
export default Footer;JSX
- 리액트 컴포넌트가 화면에 나타나는 UI 요소를 표현하도록 도와주는 JSX 문법
- 확장된 자바스크립트 문법(JavaScript Extensions)
- React.js에서는 JSX 문법 사용
- 반드시 부모 요소 하나가 감싸는 형태
- JavaScript 표현식 사용 가능
- JSX 내부에서 코드를 { } 감싸기
- JSX문법상에서의 HTML 요소
, 즉 DOM 요소의 스타일을 적용하는 방법 - ReactDOM은 HTML 어트리뷰터 이름 대신 camelCase 프로퍼티 명명 규칙 사용
- font-size -> fontSize, class -> className
Header.js
이름출력
const Header = () => {
const name = "홍길동";
return (
<div>
<h1>header</h1>
<h1>{name}</h1>
</div>
);
};
export default Header;삼항연산자 사용해보기
const Header = () => {
const name = "홍길동";
const num = 10;
return (
<div>
<h1>header</h1>
<h1>{name}</h1>
<h1>{num %2 === 0 ? "짝수" : "홀수"}</h1>
</div>
);
};
export default Header;로그인여부 판별해서 출력하기(삼항연산자사용)
import "./Header.css";
const Header = () => {
const user = {
name: "chris",
isLogin: false,
};
return <div>{user.isLogin? (<div>로그아웃</div>):<div>로그인</div>}</div>;
};
export default Header;
로그인여부 판별해서 출력하기(조건문사용),내부스타일링
const Header = () => {
const user = {
name: "chris",
isLogin: true,
};
if(user.isLogin){
return <div className="logout">로그아웃</div>;
} else {
return <div style={{ backgroundColor: "red",
borderBottom: "5px solid yellow" }}>로그인</div>;
}
};
export default Header;Header.css 생성해서 외부스타일링하기
.logout {
background-color: blue;
border-bottom: 5px solid greenyellow;
}Props->React App 컴포넌트에 값 전달
- Properties의 줄임말
- 컴포넌트에 전달된 값
- 함수를 호출하면서 인수를 전달하는 것과 비슷
- 전달하는 값에 따라서 각각 다른 UI 렌더링
Button.jsx 생성
const Button =()=>{
return <button>클릭</button>;
};
export default Button;App.jsx
import Button from "./components/Button";
function App() {
return (
<>
<h1>Hello React!!!</h1>
<Button text = { "A button" } />
<Button text = { "B button" } />
<Button text = { "C button" } />
</>
);
}
export default App;
props 사용해보기
Button.jsx
const Button =(props)=>{
console.log(props); //{text: 'A button'} {text: 'B button'} {text: 'C button'}
return <button>{props.text}</button>; //클릭할때도 props 텍스트로 출력되게수정
};
export default Button;컬러바꾸기
App.jsx
import Button from "./components/Button";
function App() {
return (
<>
<h1>Hello React!!!</h1>
<Button text = { "A button" } color={"red"} />
<Button text = { "B button" } color={"green"}/>
<Button text = { "C button" } color={"yellow"}/>
<Button text = { "D button" } />
</>
);
}
export default App;
Button.jsx
const Button =(props)=>{
console.log(props); //{text: 'A button'} {text: 'B button'} {text: 'C button'}
return <button style={{color:props.color}}>{props.text}</button>;
};
export default Button;defaultProps 사용해보기
Button.jsx
const Button =(props)=>{
console.log(props); //{text: 'A button'} {text: 'B button'} {text: 'C button'}
return <button style={{color:props.color}}>{props.text}
{props.color.toUpperCase()}</button>;
};
Button.defaultProps = {
color: "blue", //컬러값이 없을때 디폴트로 컬러값넣어준다.
};
export default Button;구조분해할당으로 변경하기
Button.jsx
const Button =({ text, color })=>{
//console.log(props);
return (
<button style={{color: color}}>
{text}{color.toUpperCase()}
</button>;
);
};
Button.defaultProps = {
color: "blue",
};
export default Button;buttonProps로 모아서 선언후 사용해보기-> spread 사용,
children 생성
App.jsx
import Button from "./components/Button";
function App() {
const buttonProps = {
text: "A button",
color: "red",
a: 1,
b: 2,
c: 3,
}
return (
<>
<h1>Hello React!!!</h1>
<Button {...buttonProps} />
<Button text={"B button"} />
<Button text={"C button"} />
<div>자식요소</div>
</Button>
</>
);
}
export default App;
Button.jsx
const Button =({ text, color,
children})=>{
//console.log(props);
return (
<button style={{color: color}}>
{text} {color.toUpperCase()}
{children}
</button>
);
};
Button.defaultProps = {
color: "blue",
};
export default Button;이벤트 핸들링 Event Handling
- 이벤트가 발생했을 때 그것을 처리하는 것
- 버튼 클릭, 메시지 입력, 스크롤 시 경고창
클릭했을때 콘솔에 버튼텍스트가 찍히는 이벤트핸들러 만들기
Button.jsx
const Button =({ text, color,
children})=>{
const onClickButton = () => {
console.log(text);
};
//console.log(props);
return (
<button onClick={onClickButton} style={{color: color }}>
{text} {color.toUpperCase()}
{children}
</button>
);
};
Button.defaultProps = {
color: "blue",
};
export default Button;마우스를 올렸을때 콘솔에 버튼텍스트가 찍히는 이벤트핸들러 추가하기
(onMouseEnter)
Button.jsx
const Button =({ text, color,
children})=>{
const onClickButton = () => {
console.log(text);
};
const onMouseEnter = () => {
console.log(text);
};
//console.log(props);
return (
<button onClick={onClickButton}
onMouseEnter={onMouseEnter}
style={{color:color }}>
{text} {color.toUpperCase()}
{children}
</button>
);
};
Button.defaultProps = {
color: "blue",
};
export default Button;합성 이벤트
- 모든 웹 브라우저의 이벤트 객체를 하나로 통일한 형태
- 크롬, 사파리, 엣지, 파이어폭스, 웨일, 오페라, 기타 등등
합성이벤트객체 e 넣어보기
Button.jsx
const Button =({ text, color,
children})=>{
const onClickButton = (e) => {
console.log(e);
console.log(text);
};
const onMouseEnter = () => {
console.log(text);
};
//console.log(props);
return (
<button onClick={onClickButton}
onMouseEnter={onMouseEnter}
style={{color:color }}>
{text} {color.toUpperCase()}
{children}
</button>
);
};
Button.defaultProps = {
color: "blue",
};
export default Button;State – 상태 관리하기->화면 업데이트를 쉽게 구현할 수 있다.
- 현재 가지고 있는 형태나 모양을 정의
- 변화할 수 있는 동적인 값
- State변수에 따라서 화면렌더링을 다르게 해줄 수 있다.
App.jsx
import { useState } from "react";
function App() {
//const state= useState();
//console.log(state);
//const [state, setState] = useState(); //구조분해할당
//console.log(state); //변수값만 나온다.
const [state, setState] = useState(0); //구조분해할당
console.log(state); //0으로 나온다.
return (
<>
<h1>Hello React!!!</h1>
</>
);
}
export default App;
const state= useState();
console.log(state);
첫번째요소는 state값, 두번째요소는 state값을 변경하는 상태변화함수로 두개의 요소를 담은 배열의 형태로 반환
App.jsx
import { useState } from "react";
function App() {
//const state= useState();
//console.log(state);
//const [state, setState] = useState();
//console.log(state); //[undefined,f]로 undefined출력
const [state, setState] = useState(0); //0으로 초기화
console.log(state); //[0,f]로 0출력
return (
<>
<h1>Hello React!!!</h1>
<h1>{state}</h1>
<button onClick={()=> {
setState(state + 1 );
}}>+</button>
</>
);
}
export default App;
