FrontEnd/React

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,..

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/1.Context APIReact에서 전역적으로 데이터를 관리하고 전달할 수 있는 기능입니다. 이를 통해 중간 컴포넌트를 거치지 않고도 트리 구조의 하위 컴포넌트에 데이터를 쉽게 전달할 수 있습니다.주로 테마나 사용자 정보, 언어 설정과 같은 데이터를 여러 컴포넌트에 전달할 때 유용합니다.   2.Context API 생성과정 2-1.Context 생성React.createContext로 새로운 Context를 생성합니다.import React from 'react';// ThemeContext라는 Context를 생성합니다.const ThemeContext = React.createContext('light'..

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/1.커스텀 훅커스텀 훅(Custom Hooks)은 React의 훅 시스템을 활용하여 재사용 가능한 로직을 작성하는것입니다.커스텀 훅은 use로 시작하는 함수로, 일반적으로 여러 훅을 조합하여 특정 기능을 캡슐화합니다.컴포넌트에서 다른 훅처럼 사용할 수 있으며, 로직을 재사용할 수 있습니다.    2.예시 (화면 너비를 추적하는 커스텀 훅)import { useState, useEffect } from 'react';import React from 'react';// 화면 너비를 추적하는 커스텀 훅function useWindowWidth() { const [windowWidth, setWindowWidth] ..

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/1.useReducer React의 Hook 중 하나로, 상태 관리의 복잡성을 다루기 위해 사용됩니다. useState보다 복잡한 상태 로직을 관리해야 할 때 유용합니다const [state, dispatch] = useReducer(reducer, initialState);state: 현재 상태를 나타냅니다.dispatch: 상태를 변경하기 위해 호출하는 함수입니다.reducer: 상태와 액션을 받아서 새로운 상태를 반환하는 함수입니다.initialState: 상태의 초기값입니다.1-1.리듀서 함수 (reducer)상태를 어떻게 업데이트할지 결정하는 함수입니다.매개변수state: 현재 상태를 나타냅니다.act..