FrontEnd/React

1.Zustand상태를 전역적으로 관리할 수 있으며, 사용하기 쉬운 API와 빠른 성능을 제공하는 리엑트 라이브러리   2.Zustand store상태와 상태를 업데이트하는 함수들을 포함하고 있으며, 상태를 변경할 때마다 리렌더링을 트리거할수있다.create함수를 통해 생성한다.      3.Context  방식 vs Zustand 방식2-1. 상태 저장,업데이트Context 방식useState를 사용하여 상태를 컴포넌트마다 관리하고 React.Dispatch> 을 사용하여 업데이트를 한다.interface GlobalState { page: number; setPage: React.Dispatch>; searched: boolean; setSearched: React.Dispatch>; sea..

1.useReducer1-1.reducer 함수상태(state)를 업데이트하는 함수 현재 상태(state)와 액션(action)을 받아서 새로운 상태(state)를 반환하는 역할을 한다.function reducer(state, action) { switch (action.type) { case 'ADD':// 새로운 작업을 tasks 배열에 추가 return { ...state, tasks: [...state.tasks, action.newTask] }; case 'DELETE':// 특정 id를 가진 작업을 삭제 return { ...state, tasks: state.tasks.filter(t => t.i..

1.Custom Hook컴포넌트 로직을 재사용 가능하게 만들기 위해 사용되는 함수내장 훅을 조합하여 더 복잡한 로직을 추상화할수도 있고 side Effect를 처리할때 사용할수도있다.import { useState, useEffect } from 'react';function useCustomHook() { const [state, setState] = useState(null); useEffect(() => { setState('Hello, world!'); }, []); return state;}export default useCustomHook; import React from 'react';import useCustomHook from './useCustomHook';function ..

1.Context APIReact에서 컴포넌트 트리 내의 모든 컴포넌트들 간에 데이터를 공유할 수 있게 해주는 방법깊게 중첩된 컴포넌트들에게 props를 일일이 전달하지 않고도 데이터를 쉽게 전달할 수 있다. 1-1.Provider데이터를 제공하는 컴포넌트하위 컴포넌트들이 이 데이터를 사용할 수 있도록한다.  1-2.Consumer제공된 데이터를 사용하는 컴포넌트useContext 훅을 사용하여 데이터를 사용할 수 있다.    2.Context API 사용하기2-1.Context 생성// Context 생성// GlobalState는 전역에서 관리할 상태들을 정의하는 인터페이스interface GlobalState { page: number; setPage: React.Dispatch>; searc..

1.HOC(High Order Component)React에서 컴포넌트를 확장하거나 재사용 가능하게 만들기 위한 패턴기존 컴포넌트를 받아서 새로운 기능을 추가한 새로운 컴포넌트를 반환하는 함수이다.재사용 가능한 로직을 여러 컴포넌트에 공유하고 싶을 때 유용하다.// HOC 버튼 텍스트를 변경function withTextChange(Component: React.ComponentType) { return (props: P) => { return {'New Text'}; };}// 버튼 컴포넌트const Button: React.FC = ({ children }) => { return {children};};// HOC 사용const ButtonWithTextChange = withTextCha..

1.CSS Module각 컴포넌트마다 고유한 클래스를 생성하여 스타일 충돌을 방지하는 방법각 CSS 파일이 모듈화되어 있으며, 클래스 이름은 컴포넌트에 맞게 고유하게 바뀐다.// MyComponent.module.css.button { background-color: blue;}// MyComponent.jsimport styles from './MyComponent.module.css';const MyComponent = () => { return Click me;};     2.Styled-componentsJavaScript 코드 내에서 스타일을 작성할 수 있게 해주는 라이브러리CSS-in-JS 방식으로, 스타일을 JavaScript 내에 직접 작성하며, 동적인 스타일링도 가능import sty..

0.라우터 (Router)라우팅(Routing)은 웹 애플리케이션에서 사용자가 요청한 URL에 따라 적절한 페이지나 컴포넌트를 표시하는 과정을 의미한다. 즉 Controller 역할 수행하며 url에 page를 Mapping하는것이다.    1.React routerReact Router는 React 애플리케이션에서 클라이언트 측 라우팅을 구현하기 위한 라이브러리이다.본래 다른 URL로 이동하게 되면 SPA를 유지하지 못하며 다시 해당 URL에 매핑되는것을 불러와야하지만 해당 React router가 있다면 React 애플리케이션의 URL 경로에 따라 어떤 컴포넌트를 렌더링할지 제어하기에 전체 페이지를 새로 고침하지 않고, URL만 변경하면서 다른 화면을 표시하는 방식을 사용할수있다.  URL 경로에 맞..

1. 컴포넌트(Component)사용자 인터페이스(UI)를 구성하는 독립적이고 재사용 가능한 코드의 조각  2. JSX(JavaScript XML)리액트에서 UI를 정의할 때 사용하는 문법 확장  2-1. JSX 특징1. {}를 사용하여 JavaScript 표현식을 포함 가능const name = 'John';const element = Hello, {name}!;  2. JSX 표현식은 React.createElement() 호출로 변환되며, JavaScript 객체를 반환JSX 예시const element = Hello, world!;변환된 JavaScript 코드const element = React.createElement( 'h1', { className: 'greeting' }, 'Hello,..