728x90
Node.js란?
Node.js는 자바스크립트를 실행시키는 구동기로, 자바스크립트의 실행환경을 웹 브라우저 밖에서도 가능하게 합니다. Node.js는 웹 서버(넷플릭스), 모바일 앱(인스타그램), 데스크탑 앱(디스코드 등)에서 사용됩니다.
설치 방법
- Node.js 짝수버전(20대)을 다운로드합니다.
- CMD 창에서 node -v 명령어를 사용해 설치를 확인합니다.
Node.js 모듈 시스템
Node.js는 패키지 단위로 프로그램을 구성합니다. 복잡한 기능을 기능별로 나누어 관리하는데, 각각의 자바스크립트 파일을 모듈이라 부릅니다.
예:
- 회원관리 기능: user 모듈
- 장바구니 기능: cart 모듈
- 결제 기능: pay 모듈
모듈 시스템
모듈을 생성하고 불러오는 시스템으로, 다양한 기능을 제공합니다. 예시로는 common.js와 es module이 있습니다.
package.json
Node.js 프로젝트에서 사용되는 파일로, 프로젝트의 이름, 버전, 설명, 작성자, 라이센스, 프로젝트 실행에 필요한 의존성 목록이 포함됩니다.
React.js란?
React.js는 Meta(Facebook)이 개발한 오픈소스 자바스크립트 라이브러리로, 대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어졌습니다. 넷플릭스, 인스타그램, 노션 등이 예시입니다.
React의 특징
- 화면 업데이트 구현이 쉽습니다.
- 컴포넌트 기반으로 UI를 구현합니다.
- 화면 업데이트가 빠르게 처리됩니다.
컴포넌트란?
화면을 구성하는 요소로, Header, Main, Footer 등을 각각 header.js, main.js, footer.js로 모듈화하여 사용합니다. 이렇게 하면 중복 코드를 줄일 수 있습니다.
선언형 프로그래밍
목적만 간결히 명시하는 방식으로, 명령형 프로그래밍과 비교됩니다. 리액트는 이 방법을 사용하여 코드를 간결하게 유지합니다.
브라우저의 렌더링
렌더링 과정
- HTML -> DOM
- Render Tree -> Layout -> Painting
- CSS -> CSSDOM
리액트는 복잡한 대규모 서비스에서 성능 저하 없이 브라우저 렌더링을 효율적으로 처리합니다.
Virtual DOM이란?
DOM을 자바스크립트 객체로 흉내낸 복제판.
리액트는 업데이트가 발생하면 실제 DOM을 수정하기 전에 가상의 복제판 DOM에 먼저 반영, 이는 성능을 향상시키기 위한 버퍼 역할을 한다.
Vite
Vite란?
차세대 프론트엔드 개발 툴로, 기본 설정이 적용된 React App을 생성할 수 있다. 리액트는 내부에 서버가 내장되어 있다.
기본 명령어
- npm run dev: React App 서버를 가동한다.
- http://localhost:5173/: 현재 가동 중인 리액트 웹 서버에 접속할 수 있는 주소이다.
JSX
JSX란?
JSX는 리액트 컴포넌트에서 HTML과 같은 형태로 요소를 작성할 수 있게 해준다
- 요소 여러 개를 하나의 요소처럼 감싸야 한다.
- 자바스크립트 표현식은 {}로 감싼다.
- 태그는 꼭 닫아야 한다.
- class 대신 className을 사용한다.
const Main = () =>{
const student={
name:"길동",
isLogin: true,
};
return(
<>
{student.isLogin ? (
<div>로그아웃</div>
) : (
<div>로그인</div>
)}
</>
)
}
// if(student.isLogin){
// return <div className="logout">로그아웃</div>;
// }
// else{
// return <div>로그인</div>
// }
// }
export default Main;
const Main = () => {
const student = {
name: "길동 ",
isLogin: true,
};
return (
<>
{student.isLogin ? (
<div
style={{ backgroundColor: "yellow", borderBottom: "3px solid blue" }}
>
로그아웃
</div>
) : (
<div>로그인</div>
)}
</>
);
};
export default Main;
=
Props와 State
Props
컴포넌트 속성을 설정할 때 사용하는 요소로, 부모 컴포넌트에서 설정할 수 있다
- defaultProps: 기본값 설정
Button.jsx
const Button = ({text,color}) => { //함수형 컴포넌트
return <button style={{color:color}}>{text}</button>
}
// const Button = (props) =>{ //함수형 컴포넌트
// console.log(props); //props값이 객체 형태로 담겨서 출력
// return <button style={{color:color}}>{text}</button>
// };
Button.defaultProps={
color: "pink",
}; //default값 -> props에 전달 못받아도 적용됨
export default Button;
App.jsx
import { Fragment } from "react";
import Header from "./components/Header";
import Main from "./components/Main";
import Footer from "./components/Footer";
import Button from "./components/Button";
function App() {
// App 컴포넌트 (부모 컴포넌트)
return (
<>
<Button text="{메일}" color={"green"}/>
<Button text="{웹툰}"/>
<Button text="{카페}"/>
</>
);
}
export default App;
-------------------------------------------------------------
import Button from "./components/Button";
function App() { // App 컴포넌트 (부모 컴포넌트)
const buttons = {
text: "메일",
color: "green",
name: "리액트",
a: 1,
};
return (
<>
<Button text="{메일}" color={"green"} />
<Button text="{웹툰}" />
<Button text="{카페}" />
</>
);
}
export default App;
- children: 컴포넌트 태그 사이의 내용을 보여주는 props
import Button from "./components/Button";
function App() { // App 컴포넌트 (부모 컴포넌트)
const buttons = {
text: "메일",
color: "green",
name: "리액트",
a: 1,
};
return (
<>
<Button {...buttons} />
<Button text="{웹툰}" />
<Button text="{카페}" >
<div>자식</div>
</Button>
</>
);
}
export default App;
import { Children } from "react";
const Button = ({text,color,children}) => { //함수형 컴포넌트
return <button style={{color:color}}>
{text}{children}
</button>
};
// const Button = (props) =>{ //함수형 컴포넌트
// console.log(props); //props값이 객체 형태로 담겨서 출력
// return <button style={{color:color}}>{text}</button>
// };
Button.defaultProps={
color: "pink",
}; //default값 -> props에 전달 못받아도 적용됨
export default Button;
--------------------------
import { Children } from "react";
const Button = ({ text, color, children }) => { //함수형 컴포넌트
const onClickButton = (e) => {
console.log(e); // 합성이벤트 (브라우저마다 이벤트 객체가 달라질 수 있어)
// 리액트에서는 여러브라우저를 참고해서 통합규격을 만들어 놓음)
console.log(text);
};
return(
<button onClick={onClickButton}
style={{color:color}}>
{text}
{children}
</button>
)
};
State
컴포넌트 내부에서 바뀔 수 있는 값 / 배열 비구조화 할당과 spread 연산자를 사용하여 state를 업데이트할 수 있다.
import { Fragment } from "react";
import { useState } from "react";
function App() {
// App 컴포넌트 (부모 컴포넌트)
const [state, setState] = useState(0);
console.log(state);
return ( // 리렌더링 - 컴포넌트의 state값이 바뀌면 컴포넌트가 returnㅇ르 다시한다 ->
// 화면을 다시그린다 -> 그리고 그 떄, 변경된 state값도 바로 화면에 반영됨!
<>
<h2>{state}</h2>
<button onClick={() => {
setState(state+1);
}}
> + </button>
</>
)
}
export default App;
import { Fragment } from "react";
import { useState } from "react";
function App() {
// App 컴포넌트 (부모 컴포넌트)
const [state, setState] = useState(0);
const [computer,setComputer] = useState("OFF");
return ( // 리렌더링 - 컴포넌트의 state값이 바뀌면 컴포넌트가 returnㅇ르 다시한다 ->
// 화면을 다시그린다 -> 그리고 그 떄, 변경된 state값도 바로 화면에 반영됨!
<>
<h2>{computer}</h2>
<button onClick={() => {
setComputer(state === "ON" ? "OFF" : "ON");
}}
> {computer === "ON" ? "끈다" : "켠다"}
</button>
</>
)
}
export default App;
import { Fragment } from "react"
import { useState } from "react"
const Computer = ({power}) => {
console.log(power);
return(
<div>{power === "ON" ?
<h1>ON</h1> : <h1>OFF</h1>
}
</div>
);
}
function App() { //App 컴포넌트(부모 컴포넌트)
const [state,setState]=useState(0);
const [power,setPower] = useState("OFF");
return ( //리렌더링(reRendering- 컴포넌트의 state값이 바뀌면 컴포넌트가 return을 다시한다 ->
//화면을 다시 그린다 -> 그리고 그때, 변경된 state값도 바로 화면에 반영된다!!!!
<>
<div>
<Computer power={power}/> {/*부모컴포넌트에서 prop값 설정할 수 있다 */}
<button onClick={()=>{
setPower(power==="ON"?"OFF":"ON");
}}>
{power==="ON"?"끈다":"켠다"}
</button>
</div>
<div>
<h1>{state}</h1>
<button onClick={()=>{
setState(state+1);
}}
>
+
</button>
</div>
</>
)
}
export default App
같은 기능을 하는 버튼을 설정을 하지 않았지만 동일한 동작을 하는것을 볼 수 있다.
리액트에서는 기능별로 따로 구현해주어야한다.
App.jsx
import { Fragment } from "react";
import { useState } from "react";
import Computer from "./components/Computer";
import Count from "./components/Conut";
function App() {
//App 컴포넌트(부모 컴포넌트)
return (
//리렌더링(reRendering- 컴포넌트의 state값이 바뀌면 컴포넌트가 return을 다시한다 ->
//화면을 다시 그린다 -> 그리고 그때, 변경된 state값도 바로 화면에 반영된다!!!!
<>
<Computer />
<Count />
</>
);
}
export default App;
Computer.jsx
import { useState } from "react";
const Computer = () => {
const [power, setPower] = useState("OFF");
console.log(power);
return (
<div>
{power === "ON" ? <h1>ON</h1> : <h1>OFF</h1>}
<button
onClick={() => {
setPower(power === "ON" ? "OFF" : "ON");
}}>
{power === "ON" ? "끈다" : "켠다"}
</button>
</div>
);
};
export default Computer;
Count.jsx
import { useState } from "react";
const Count = () => {
const [state, setState] = useState(0);
console.log(state);
return(
<>
<div>
<h1>{state}</h1>
<button
onClick={() => {
setState(state + 1);
}}
>
+
</button>
</div>
</>
)
};
export default Count;
728x90