NodeJs

// 계산 기능

const add = (a, b) => a + b;
const sub = (a, b) => a - b;

module.exports = {
  moduleName: "calc module",
  add: add,
  sub: sub,
};

const calc = require("./calc");

console.log(calc);

Node 의 module.exports 와 require 를 조합해서 사용할 수 있다.

---

npm 패키지

https://www.npmjs.com/

---

왜 React 를 사용하는가?

1. 컴포넌트로 코드 재사용

• 웹페이지에는 중복 코드가 너무 많음. 근데 이 중복 코드를 수정사항이 생길때마다 일일히 변경하는건 진짜 힘듬.. => Shotgun Surgery

=> 재사용해도 되는것들은 컴포넌트로 불러서 사용하자!(클래스 느낌)

2. 선언형 프로그래밍의 장점

• 웹서비스는 선언형 프로그래밍이 유리!

3. 버츄얼 돔

• 요소를 추가하는 과정에서 계속 실시간으로 업데이트 하지않고

• 한번에 리얼 돔에 업데이트!

---

리액트 앱을 만드는 방법

Create React App

• 이미 다 세팅 완료 된 Boiler Plate 를 이용해서 바로 써보자!

JSX

• 컴포넌트 사용하기

• CSS 를 객체처럼.

• 숫자나 문자열만 넣을 수 있음

---

State(상태)

• 상태를 변경하는 방식

• 테마처럼 동적으로 계속 바뀌는

---

Props

• 컴퍼넌트의 이름을 붙여서 전달하는 방법
• 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용

function App() {
  const counterProps = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5,
    initalValue: 5,
  };

  return (
    <div>
      <MyHeader />
      <Counter {...counterProps} />
    </div>
  );
}

• 객체의 스프레드 연산자로 전달