[커피 월드컵] React에서 사용한 기술 정리

 

미니미 프로젝트, 커피 월드텁 시리즈 제3탄..

 

1탄: [커피 월드컵] Netlify React 배포

2탄: [커피 월드컵] React 카카오톡 공유하기

3탄: 현재 글!

 

React를 한땀 한땀, 살펴볼 예정은 아니지만 어떤 기술을 활용했는지 간단히 정리해두면 좋을 것 같아서 VS Code를 실행해서 복기해 보고자 합니다.

 

저는 React가 완전 처음은 아니고, 기존에 팀 프로젝트에서 프론트 기술로 사용해본 경험이 있습니다.

그래서 React를 하나도 몰라도 만들 수 있군! 보다는 React를 조금 알아도 만들 수 있군! 정도로 생각해 주시면 좋을 것 같습니다!

 

찐 시작!

 

 

1. React Hooks

쓰지 않을 수 없는 React Hooks...

그 중에 저는 useState, useEffect, useMemo를 사용했습니다.

* useState

  * 상태를 관리하는 훅
  * 현재 상태를 나타내는 state값과 이 상태를 변경하는 setState값을 한 쌍으로 제공

const [selected, setSelected] = useState({
	coffee: null,
	drink: null,
	dessert: null,
});

 

* useEffect

  * 컴포넌트가 화면에 렌더링 될 때 마다 실행되는 효과(effect)를 구현할 수 있게 해주는 훅

  * useEffect(function, deps)의 형태로 사용
    * function: 실행시킬 함수, deps: 의존성 배열
  * 의존성 배열 없이 useEffect를 실행시키게 되면 페이지가 렌더링 될 때마다 데이터를 불러옴
  * 의존성 배열에 빈배열을 담아주게 될 경우에는 첫 렌더링 시에만 함수를 실행
  * 의존성 배열에 state값이나 props로 상속받은 데이터값 등을 담아주게 되면 해당값이 변할 때마다 함수를 실행

useEffect(() => {
    const shuffledItems = [...items].sort(() => Math.random() - 0.5);
    setBrands(shuffledItems);
    setDisplays([shuffledItems[0], shuffledItems[1]]);
}, [])

 

* useMemo
 * 메모이제이션을 활용하여 성능 개선을 위해 많이 사용
   * 메모이제이션: 기존에 수행한 연산의 결과 값을 어딘가에 저장해두었다가 동일한 입력이 들어오면 재활용하는 프로그래밍 기법
  * cf. useMemo: 메모이제이션된 값을 반환하는 훅, useCallback: 메모이제이션 된 함수를 반환하는 훅

const jsConfetti = useMemo(() => new JSConfetti(), []);

 

+ useRef

  * 특정 DOM에 접근하여 DOM 조작을 가능하게 하는 훅
    * 리액트 프로젝트에서도 특정 요소를 선택해야하는 상황에 사용

  * 상태처럼 값을 저장하지만 리렌더링을 트리거하지 않는 값으로 사용할 수 있는 훅

const inputRef = useRef(null);

// 특정 DOM에 접근
<input ref={inputRef} type="text" />

 

 

2. styled component

css가 js에 들어가 있는 라이브러리인 styled component! 처음 써봤습니다!

커피 월드컵 만드는 영상에서 styled component를 쓰시는 걸 보고 도전해봤는데, 생각보다 간편하고 좋았습니다.

import { ImageContainer, TitleImage, BrandImage } from "./styleGameResult";

<ImageContainer>
    <TitleImage/>
    <BrandImage/>
</ImageContainer>


export const ImageContainer = styled.div`
    position: relative;
    width: 100%;
    height: auto;
`;

 

 

3. React Router

라우팅(Routing): 웹 애플리케이션에서 사용자가 URL을 통해 페이지에 접근할 때 해당 URL에 따라 서로 다른 컴포넌트를 보여주는 것

→ URL의 경로(path)와 쿼리(query) 부분을 분석하여 해당하는 컴포넌트를 렌더링

SPA는 초기 로딩 시 서버에서 모든 컨텐츠를 불러오는 것이 아니라 필요한 데이터만 가져와 화면을 구성하기 때문에, URL에 따라 다른 화면을 보여주는 라우팅이 필요

function App() {
  return (
    <Router>
      <GlobalStyle />
      <Routes>
        <Route path="/" element={<Game />} />
        <Route path="/result" element={<ResultPage />} />
      </Routes>
    </Router>
  );
}

 

Route를 통해 여러 페이지를 만들어주게 되면, 페이지간 이동을 위해 Link와 useNevigate를 사용할 수 있습니다.

  * Link

    * html에서의 <a>와 유사하게 클릭 이벤트를 통해 특정 경로로 이동

    * 주로 사용자 인터페이스(UI)에서 네비게이션 링크를 생성할 때 사용

import { Link } from "react-router-dom";

function HomePage() {
  return (
    <div>
      <h1>홈페이지</h1>
      <Link to="/about">About 페이지로 이동</Link>
    </div>
  );
}

  * useNaivgate

    * 이벤트 핸들러 내부에서 동적으로 페이지를 이동할 때 사용

    * 논리적으로 경로를 제어해야 하는 경우에 사용

import { useNavigate } from "react-router-dom";

function LoginPage() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // 로그인 로직 처리 후 페이지 이동
    navigate("/dashboard");
  };

  return (
    <div>
      <h1>로그인 페이지</h1>
      <button onClick={handleLogin}>로그인</button>
    </div>
  );
}

 

* URLSearchParams

  * 웹의 URL 쿼리 문자열을 다루는 JavaScript의 내장 클래스

const queryParams = new URLSearchParams({
    coffee: selected.coffee,
    drink: selected.drink,
    dessert: selected.dessert,
    brand: brand.brand,
}).toString();

  * search.location

    * 웹 브라우저의 현재 URL에서 쿼리 문자열을 나타내는 속성, 문자열 형태로 쿼리 문자열(Query String)을 나타냄

const searchParams = new URLSearchParams(location.search);
const selected = {
    coffee: searchParams.get("coffee"),
    drink: searchParams.get("drink"),
    dessert: searchParams.get("dessert"),
};
const brand = searchParams.get("brand");

 

🚨 개선할 수 있는 사항

각각의 값을 get을 통해 지정해야 하는 것과 모든 브라우저에서 지원해주지 않는다는 단점을 가지고 있기 때문에 npm i query-string 을 사용해 해당 단점들을 해결할 수 있음

 

 

4. JSConfetti

커피 월드컵 종료 후 폭죽 효과를 만들고 싶었으나, 라이브러리가 있기에 사용해 보았습니다.

 

쉽게 구현할 수 있는 방법과 마지막 옵션 선택에 따라 이모지로 변경할 수 있다는 장점을 기반으로 저는 JSConfetti를 사용했습니다.

 

 

 

🎉 커피월드컵 주소 🎉

https://hj0216.netlify.app/

Coffee WorldCup

 

 

 

📑

참고 자료

Chat GPT

https://choijying21.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%9B%85%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0React-Hooks%EB%9E%80#4)%20useMemo%2C%20useCallback-1

[React] 리액트 훅에 대해 알아보기(React Hooks란?)

https://woongtech.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-Hooks-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-reacthookstypescript

리액트 Hooks 이해하기 [react/hooks/typescript]

https://www.youtube.com/watch?v=_7WF8TtHD8s

https://woongtech.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9A%B0%ED%84%B0-%EC%8D%A8%EB%B3%B4%EA%B8%B0-reactroutertypescript

리액트 라우터 써보기 [react/router/typescript]

https://tthinks.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9D%B4%EB%8F%99%ED%95%98%EA%B8%B0-Link%EC%99%80-useNavigate

[React] 리액트에서 페이지 이동하기 | Link와 useNavigate

https://velog.io/@minzyee/useLocation

useLocation, URLSearchParams, location.search, 쿼리 문자열

https://jikeun.tistory.com/entry/React-params-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-URLSearchParams-%EC%82%AC%EC%9A%A9%EB%B2%95-npm-i-query-string

React : params 사용하기 URLSearchParams 사용법 +) npm i query-string

https://velog.io/@tinubee/React-%EC%83%89%EC%A2%85%EC%9D%B4-%EC%A1%B0%EA%B0%81-%EB%82%A0%EB%A6%BC-%ED%9A%A8%EA%B3%BC-feat.-Canvas-Confetti

[React] 🎉 색종이 조각 날림 효과 (feat. Canvas-Confetti)