[DSC] 웹플랫폼 3주차

강의자 블로그
https://velog.io/@ehdrms2034/DSC-Node.js-%EC%99%80-React%EB%A1%9C-%EC%9B%B9-%ED%94%8C%EB%9E%AB%ED%8F%BC-%EC%A0%9C%EC%9E%91%EA%B8%B0-3

컴포넌트

왜 따로 컴포넌트를 만드는가?
컴포넌트를 잘게 쪼개면 성능 및 코드 최적화에 좋다. 생산성 향상을 위해서 사용된다.

예를 들어 Button이라는 컴포넌트를 만들어 놓으면 props 값을 다르게 넣어주면 props 값만 바뀌고 나머지는 다 같은 Button을 여러 개 만들 수 있다.

개발자들은 중복된 코드를 만드는 걸 좋아하지 않는다. 중복된 로직이 있으면 함수로 만들어서 최대한 중복을 없앤다. 코드를 재사용 함으로써 가독성이 좋아지고 생산성이 향상 된다.

예를 들어 중복되는 1000줄의 코드가 있다고 하면 그 1000줄의 코드를 여기에도 쓰고 저기에도 쓰고 하면서 코드가 난잡해지고, 코드를 고쳐야할 일이 생긴다면 사용한 모든 곳에서 다 고쳐야할 것이다. 그러면 생산성이 완전 떨어지게 된다. 만약 1000줄의 코드를 함수로 만들어 놓고 사용한다면, 그 함수만 적어주면 되므로 코드의 가독성이 높아지고, 고칠일이 생기더라도 그 함수 한번만 고치면 모든 곳들에서 적용이 되므로 생산성까지도 높아지는 1석 2조의 효과를 얻을 수 있다.

컴포넌트 또한 마찬가지다. 중복 되는 코드를 컴포넌트로 만듦으로써 가독성, 생산성을 향상 시킬 수 있다.

props

props는 properties의 줄인 말로 부모 컴포넌트에서 자식 컴포넌트로 넘겨준 데이터이다.
이 props는 부모컴포넌트의 state의 값일 수도 있고 그냥 문자열일 수도 있고, 함수일 수도 있다.
props는 자식 컴포넌트에서 변경을 할 수 없으며, 부모 state 값이 props 값일 경우에는 setState를 수행하는 함수를 props로 같이 넘겨줘서 변경 시킬 수 있다.

state

컴포넌트가 가지는 상태 값이다. state는 props와 다르게 값을 변경할 수 있다.
원래 함수형 컴포넌트에서는 state 값을 못 써서 stateless라고 불리었지만 리액트 v16.8에 hook이 추가 되면서 state를 사용할 수 있게 되었다. 그래서 더 이상 stateless라고 부르는 것은 올바르지 않다. state는 내장 hook인 useState를 사용해서 쓸 수 있으며, 사용시 [값, setter]를 구조분해 문법으로 받아 사용할 수 있다.

다음과 같이 간단한 Counter를 만들어볼 수 있다.

import React, { useState } from "react";

const CustomCounter = () => {
  const [count, setCount] = useState(0);

  const plusCount = () => {
    setCount(count + 1); //setCount 값을 통해서 count = count +1
  };

  const minusCount = () => {
    setCount(count - 1); //setCount 값을 통해서 count = count -1
  };

  return (
    <div>
      현재 수 : {count} <br />
      <button onClick={plusCount}> Plus </button>
      <button onClick={minusCount}> Minus </button>
    </div>
  );
};

export default CustomCounter;

Bit.ly

Bit.ly는 긴 URL을 짧은 URL로 만들어 주는 서비스이다.
사용되는 아키텍쳐와 프레임워크로는

• DB: MongoDB
• Server: Node.js(Express)
• Client: React

몽고 DB란?

NOSQL(Not Only SQL)의 대표주자

• NoSQL의 장점
  1) 불필요한 Join의 최소화
  2) 유연성 있는 서버 구조 제공
  3) 비정형 데이터 구조로 설계 비용 감소
  4) Read/Write가 빠르며 빅데이터 처리가 가능
  5) 저렴한 비용으로 분산처리 및 병렬처리 가능

프론트 제작 위한 준비

npm install styled-components react-router-dom antd axios

styled-components
emotion과 함께 css in js의 대표주자이다. js 파일 안에서 css를 작업할 수 있다.

react-router-dom
SPA를 유지하며 라우팅을 할 수 있게 제공해주는 라이브러리.ssr을 하지 않아도 될 때 많이 쓰며 ssr이 필요할 땐 보통 Next.js를 사용하지만. Next를 사용하지 않고도 react-router-dom과 다른 기능을 합쳐 SSR을 구현할 수 있다.

antd
bootstrap과 비슷한 역할을 하는 라이브러리. 미리 만들어진 다양한 디자인 컴포넌트를 통해 쉽게 UI/UX 제작 가능.

axios
서버와 http 통신을 하기 쉽게 해주는 대표적인 라이브러리. 자바스크립트는 Fetch API가 있지만 IE에서는 Fetch를 사용하지 못 해서 브라우저 호환성이 떨어진다. axios는 모든 브라우저에서 사용 가능하다.