REACT

과거 리액트 애플리케이션을 만들 때 CRA가 각광을 받았지만 요즘은 서버 사이트 렌더링을 지원하는 Next.js와 같은 프레임워크가 큰 인기를 끌고 있다. 서버 사이트 렌더링이란싱글 페이지 애플리케이션(SPA)SPA란 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 JS에 의존하는 방식을 의미한다. 최초에 첫 페이지에서 데이터를 모두 불러온 후 페이지 전환을 위한 모든 작업이 JS와 브라우저의 history.pushState와 history.replaceState로 이뤄진다. 이러한 작동 방식은 최초에 로딩해야 할 JS 리소스가 커지는 단점이 있지만 첫 로딩 이후 서버를 거쳐 필요한 리소스를 받아올 일이 적어져 사용자에게 훌륭한 UI/UX를 제공한다는 장점이 있다. 전통적인 방식의 애플리케이션 vs..

중복 코드를 피해야 한다는 것은 중요한 말이다. 반복되는 코드의 존재만으로도 비효율이며 유지보수도 어려워진다. React에서 재사용할 수 있는 로직을 관리할 수 있는 방법은 두 가지가 있다.사용자 정의 훅(Custom Hook)고차 컴포넌트(High Order Component)사용자 정의 훅(Custom Hook)서로 다른 컴포넌트 내부에서 같은 로직을 공유하고자 할 때 주로 사용되는 것이 사용자 정의 훅이다. 이는 Hook을 기반으로 필요한 훅을 만드는 기법이며, 오직 React에서만 사용할 수 있는 방식이다. React 훅이 use로 시작하는 네이밍 규칙이 있는 것처럼 사용자 정의 훅 또한 use로 시작하는 이름을 갖는 것이 규칙이다. 아래는 HTTP 요청을 하는 fetch를 기반으로 한 사용자 정..

useContextuseContext에 대해 이해하기 위해서는 React의 Context에 대해 알아야 한다. Context란?React 애플리케이션은 기본적으로 부모 컴포넌트와 자식 컴포넌트로 이뤄진 트리 구조를 갖고 있다. 따라서 부모가 가진 데이터를 자식에게 전달하려 한다면 props를 통해 데이터를 전달해야 한다. 이때 부모와 자식의 거리가 길어질 수 록 코드가 복잡해진다. 이러한 기법을 prop 내려주기(props drilling)라 한다. 이러한 prop 내려주기는 양쪽에서 모두 불편하다. Context를 이용하면 명시적 props 없이도 하위 컴포넌트 모두에서 원하는 값을 사용할 수 있다.import React, { cr..

최근 진행중인 프로젝트의 컴포넌트를 수정과 리팩토링하는 어려움이 있는 컴포넌트를 많이 경험했습니다. 대부분의 컴포넌트에서 아래와 같은 공통점이 발견할 수 있었습니다.API, 컨텍스트, 기능 로직 등의 코드가 분리되지 않고 컴포넌트에 몰려있는 점프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트의 구분이 안되어있는 점이러한 문제들은 내가 작성한 코드에서도 확인할 수 있었다..... 관심사별 컴포넌트의 로직을 분리하기전에 SOLID 원칙의 SRP원칙에 대해 알아봅시다. SOLID의 S를 담당하는 SRP원칙 React 3회차: SOLID한 컴포넌트 만들기1. SOLID 원칙 지난 시간에 공부했던 ‘비즈니스 로직’, ‘캡슐화’, ‘모듈성, ‘추상화’ 등을 이번에 배우는 SOLID라는 개념으로 더 확실하게 정리해보자. S..

지금부터 리액트 훅에 대해 알아보자.Hook은 클래스 컴포넌트에서만 가능했던 state, ref 등 리액트의 핵심 기능을 함수에서도 가능하게 만들어 준 것이다. 리액트로 웹 서비스르를 만드는 개발자라면 훅이 어떻게 동작하는지 이해할 필요가 있다. useStateuseState는 함수 컴폰너트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅이다.import {useState} from 'react'const [state,setState] = useState(initialState) useState의 인수로는 사용할 state의 초깃값을 넘겨주면 된다. 만약 useState를 사용하지 않는다면 어떻게 될까?import React from 'react'const Component = () =>..

React Context를 이용해 전역 상태 관리를 해보겠다. "use client";import { selectType } from '@/app/(auth-required)/main/info/course-reviews/write-review/type';import { createContext, ReactNode, useState, Dispatch, SetStateAction,} from "react";type DataType = { departments: selectType; grade: selectType;};type ContextType = { data: DataType; setData: Dispatch>;};// Context 기본값을 명확하게 설정export const Revie..