imysydesu 님의 블로그

React - 3

ex) 전체 페이지 중 여러 공간(헤더, 바디, 푸터)으로 나뉘어져 있다면 로그인을 할 때 모든 공간을 하나씩 업데이트 해줘야함 -> context를 사용하면 모든 컴포넌트에 공용적으로 데이터를 사용할 수 있음 createContext() 여러 컴포넌트가 함께 사용할 데이터를 저장할 공간 (context)을 만드는 함수context가 없다면 부모가 자식에게 계속 props를 전달해야 함Provider : 데이터를 넣는 역할, 데이터를 담아서 범위(태그)를 지정해주는 컴포넌트(태그)useContext() : 데이터를 꺼낼 때 쓰는 Hook 함수 ex) 전역으로 공유할 Context 만들기(보통 외부 혹은 별도 파일에 설정)export const UserContext = createContext(nu..

React - 2

커스텀 훅을 이용한 데이터 페칭 useProducts.js라는 훅에서 데이터를 받아오는 로직을 처리Products.jsx 컴포넌트에서는 그걸 가져와서 화면에 그려주는(UI) 작업 기존 파일 : Products.jsx(하단 코드)을 활용해 useProducts.js / Products.jsx로 나누기import React, { useEffect, useState } from "react";export default function Products() { const [loading, setLoading] = useState(false) const [checked, setChecked] = useState(false) const [error, setError] = useState() ..

React - 1

리액트(React) UI를 구성하기 위한 자바스크립트 라이브러리컴포넌트를 기반으로 화면을 효율적으로 재사용/관리할 수 있도록 설계뙨 프론트엔드 기술전통적인 DOM을 직접 조작하는 대신, 가상 DOM(Virtual DOM)을 통해 변경된 부분만 최소 비용으로 업데이트 함(메모리를 조금 더 사용하긴 함)SPA개발을 넘어 next.js같은 프레임워크와 함께 SSR/CSR/SSG/ISR 등 다양한 렌더링 전략을 지원하는 기술 SPA(Single Page Application) 하나의 HTML 페이지에서 모든 화면 전환을 처리하는 웹 애플리케이션 방식기존의 MPA(Multi Page Application)처럼 페이지 이동 때마다 서버에서 HTML을 재요청하지 않고 처음 한 번만 HTML, CSS, JS를 받..