KDT 5th 웹개발자 입문 수업 40일차

간단하게 백엔드 서버 구축해서 데이터를 프론트에 보내기

터미널 2개에 백엔드 서버와 리액트를 둘다 돌려준다.

const express = require('express');
const cors = require('cors');

const server = express();
const PORT = 4000;

server.use(cors());
server.get('/', (req, res) => {
  const pororoObjArr = [
    {
      name: '뽀로로',
      age: '5',
      nickName: '사고뭉치',
    },
    {
      name: '루피',
      age: '4',
      nickName: '공주님',
    },
    {
      name: '크롱이',
      age: '5',
      nickName: '장난꾸러기',
    },
  ];

  res.send(JSON.stringify(pororoObjArr));
});

server.listen(PORT, () => {
  console.log(`${PORT} 번 에서 서버 구동 중`);
});

포스트맨으로 제대로 값이 들어오는 지 확인

 

프론트에서 fetch()로 값 읽어오기

import React, { useEffect, useState } from 'react';
import ProfileComponent from './ProfileComponent';

export default function UseEffectFetch() {
  const [dataArr, setDataArr] = useState([]);

  const fetchData = async () => {
    const resFetch = await fetch('http://localhost:4000/', {
      method: 'GET',
      headers: {
        'Content-type': 'application/json',
      },
    });

    if (resFetch.status !== 200) return;

    const data = await resFetch.json();
    setDataArr((cur) => (cur = data));
    console.log(dataArr);
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <>
      {dataArr.map((e, idx) => {
        return <ProfileComponent {...e} key={idx} />;
      })}
    </>
  );
}

상태 변화 함수의 인자에 콜백함수를 줄 때 첫번째로 들어가는 인자는 상태 변수므로,

setDataArr((cur) => data);

cur 에 dataArr 상태 변수가 들어가지므로 cur = data --> dataArr = data 형식이 되는 것이다.

이렇게 써주는 이유는 동기적 처리가 필요하기 때문이다.

 

 

 

위처럼 fetch 과정을 디버깅을 위하여 여러차례 나눠줘도 되지만 간단하게 나타내고자 한다면,

  const fetchData2 = async () => {
    const resData = await fetch('http://localhost:4000/').then((res) =>
      res.json(),
    );

    setDataArr((cur) => resData);
  };

fetch() 다음에 then() 을 사용하여 바로 값을 얻을 수도 있다.

 

 

useMemo

오래 계산이 필요한 값을 저장해서 반복적으로 사용하고 싶을 때 사용 (연산 최적화)

const value = useMemo(() => {
	return item을 활용한 코드;
}, [ item ]);

첫 인자로는 콜백함수를, 두번째 인자로는 의존성 인자를 받아준다. (useEffect 와 유사)

하지만 위처럼은 거의 사용되지 않는다고 함...

 

useEffect() 를 사용할 때 두번째 인자인 deps 에 변경을 지켜볼 조건을 지정해주는데

해당 조건(상태)이 비원시 타입(객체나 배열 등)이라면?

리렌더링 될 때 새로운 메모리 주소를 할당 받기 때문에 값이 실제로 변하지 않았음에도 바뀌었다고 여기게 될 수 있다.

즉 필요없는 useEffect 의 호출을 막기 위해서 useMemo 를 사용해주는 것이라고 한다.

 

하지만 useEffect 의 의존성 배열은 최대한 객체 또는 배열 값을 주지 않고 원시타입의 값을 주는 것이 좋다.

 

 

 

컴포넌트 단위로 스타일 주기

1. 인라인 스타일 주기

2. css 파일을 import 해주기

 

 

3. Styled Components 패키지 사용해주기

리액트는 기본적으로 컴포넌트 단위가 중심이 되는 구조며, 컴포넌트는 상대적으로 작은 규모로 운영되므로 기존의 방식처럼 css 파일을 분리하여 운영할 필요가 없다.

 

npm i -S styled-components 로 설치 

 

패키지므로 모듈로 불러와줄 수 있다!

import styled from 'styled-components';

Styled Components 사용하기?

 

먼저 자기만의 이름으로 태그를 구성해준다.

styled components 는 My- 접두어를 사용한 이름이 사용된다(약속)

export default function TextStyled() {
  return (
    <div>
      <h1>h1</h1>
      <span>span</span>
    </div>
  );
}

위 같은 구조를,

각각의 태그를 변수에 할당하고 해당 태그의 실제 태그명을 styled 를 이용하여 지정해준다.

`` 이 css의 { } 와 같고 css 속성을 벡틱 안에 써주면 된다.

const 지정해준styled변수명 = styled.실제태그명`
	// 지정해줄 css 속성들
`;

 

자신이 지정한 태그의 이름은 일종의 빈 태그로 만들어지지만 styled 모듈을 사용하여 해당 태그의 실질적 태그를 지정할 수 있다.

import React from 'react';
import styled from 'styled-components';

export default function TextStyled() {

  const MyDiv = styled.div`
    background-color: orange;
  `;
  const MyHeading = styled.h1`
    color: dodgeblue;
  `;
  const MySpan = styled.span`
    background-color: yellow;
    font-weight: 700;
  `;

  return (
    <MyDiv>
      <MyHeading>h1</MyHeading>
      <MySpan>span</MySpan>
    </MyDiv>
  );
}

 

 

해당 확장 프로그램을 설치하면 styled 모듈을 사용하여 작성한 css 의 스니펫이 정상 작동 된다.

 

// 키프레임 사용하기
import styled, { keyframes } from 'styled-components';

 

const logoSpin = keyframes`
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(360deg);
    }
 `;

const AppLogo = styled.img`
    height: 40vmin;
    pointer-events: none;
    animation: ${logoSpin} infinite 20s linear;
`;

styled-components 의 keyframes 를 사용하여 키프레임을 주고, animation 에 벡틱이므로 변수를 불러오려면 ${ } 안에 키프레임 변수를 넣어준다.