min

1. React.useEffect의 정의 : React.useEffect를 한 문장으로 정의하자면 "컴포넌트와 외부 시스템을 동기화"해주는 리엑트 훅이다. 여기서 이런 의문이 생길 수 있다. "외부 시스템"이 무엇인가? , "동기화"를 해준다는 것은 무엇인가? 그래서 쳅터 2에서는 이 2가지 키워드에 대해서 살펴보려고 한다. 2. synchronize(동기화) external system(외부 시스템) synchronize(동기화) : 동기화의 사전적인 의미는 "서로가 알고 있는 정보들을 일치시킨다는 것"이다. 이 의미를 컴퓨터 입장에서 생각해보면 "서로 다른 2개의 시스템에 데이터를 일치시킨다"는 의미로 해석할 수 있을 것이다. 그리고 여기서 서로 다른 2개의 시스템은 외부 시스템과 , 컴포넌트가 될 ..

1. React.useState에 정의 : React.useState를 한 문장으로 정의한다면 컴포넌트에 "상태변수"를 추가할 수 있는 훅이다. 여기까지 들었을 때 이런 궁금중이 생길 수 있다. "상태변수"라는 것은 어떤 것일까? 그래서 쳅터 2에서는 상태 변수에 대해서 작성해볼려고 한다. 2. state variable(상태 변수) : 상태 변수란 한 문장으로 정의하자면 컴포넌트의 메모리이다. 컴포넌트는 다음 예시와 같이 상호작용의 결과를 통해 화면이 바뀔 수 있다. input에 값이 변할 때마다 input field의 값을 변화시켜야 하는 상황 input에 값을 입력하고 button을 눌렀을 때 input의 값을 출력하는 상황 이 2가지 예시들에서는 공통적인 궁금중이 발생한다." input에 값을 입..

1. loader와 action에 대하여 loader : 로더는 말 그대로 데이터를 가져다주는 것을 의미한다. 즉 우리가 어떤 페이지를 갈 때 그 페이지에 데이터를 로딩하고 그 데이터를 던져주는 역할을 한다. 그럼 여기서 이런 의문이 생길 수 있다. 만약 데이터가 로딩 되고 있으면? , 데이터는 어떻게 가져와? 그 역할을 하는 친구가 Suspense Await와 useLoaderData() 훅이다. // ./pages/root.jsx function Root() { const user = useLoaderData(); // data from } action : 액션은 말 그대로 데이터를 서버에게 던져주는 것을 의미한다. 즉 우리가 어떤 데이터를 폼을 통해서 전달할 때 바로 백엔드 서버에게 전달하는 것이 ..

1. Suspense 란? suspense는 어떤 컴포넌트가 읽어야 하는 데이터가 아직 준비가 되지 않았다고 리엑트에서 알려주는 새로운 매커니즘이다. 2. Suspense를 사용하는 이유 suspense를 사용하는 이유는 2가지 정도가 있다. 첫번째는 표준화이다. 리엑트에서 suspense가 나오기 전에는 컴포넌트가 비동기 데이터를 읽어오는 방법을 표준화 시켜지지 않았기에 이는 코드의 가독성과 유지보수적인 측면에서 어려움이 존재한다. 두번째로는 waterfull처럼 명령 프로그래밍에 가깝다는 것이다. 이는 리엑트에서 기본적인 선언적 프로그래밍을 지원한다는 점에서 보았을 때 핀트가 맞지 않는다는 문제가 발생한다. 하지만 Suspense를 통해서 복잡한 코드는 1차적으로 보이지 않고 핵심 로직만을 보여주기 ..

1. React Lazy를 사용하는 이유? React Lazy를 사용하는 이유는 다음과 같다. 만약 다음과 같은 코드가 있다고 가정하자 import { BrowserRouter, Route, Routes } from "react-router-dom"; import Home from "../pages/Home"; import Write from "../pages/Write"; import Chart from "../pages/Chart"; import SignIn from "../pages/SignIn"; import SignUp from "../pages/SignUp"; const Router = () => { return ( ); }; export default Router; 여기서 만약 매인페이지에 ..

오늘은 useTransition에 대해서 알아볼려고 한다. 1. useTransition의 탄생배경 : useTransition은 사실상 리엑트에서의 동시성의 구현하기 위한 도구라고 볼 수 있다. 2. useTransition의 구조 : useTransition은 2가지를 리턴하고 있다. isPending과 startTransiton이다. isPending : 현재 우선순위가 낮은 작업이 지연되고 있음을 알려주는 boolean 값이다. startTransiton : 우선순위를 낮게 잡을 함수를 래핑하는 함수이다.

오늘은 useEffect의 실행 순서에 대해서 알아볼려고 한다. 1. useEffect의 실행 순서에 대해서 useEffect의 실행 순서는 리엑트의 생명 주기와도 관련이 깊다. 여기서 생명 주기는 크게 3가지로 나눌 수 있다. (1) 마운트가 될 시에 useEffect는 무조건 마운트가 될 시에 콜백함수를 실행시킨다. useEffect에는 의존성 배열이 있는데 이때 의존성 배열에 값을 넣지 않는 경우 useEffect를 마운트가 될 시에"만" 실행시킨다. (2) 업데이트가 될 시에 useEffect는 마운트가 될 시에 한번 실행하고 업데이트가 될 시에도 콜백함수를 실행시킬 수 있다. 이때 실행시키는 방법은 useEffect에 의존성 배열에 값을 넣는 경우에 useEffect를 해당 값이 업데이트가 될때..

오늘은 useRef에 대해서 알아볼려고 한다. 정확하게는 useRef가 무엇인지에 대해서 알아볼려고 한다. 1. useRef가 무엇인가? : useRef는 리엑트에서 제공하는 훅으로 크게 2가지의 기능을 가지고 있다. 첫번째는 DOM에 대한 참조 , 두번째는 값의 저장이다. 1-1) DOM의 대한 참조 : react에서 DOM에 직접적으로 참조를 하는데 사용하는 훅으로 getElementById와는 다음과 같은 차이점이 있다. getElementById는 리엑트와의 통합을 제공하지 않는다. 이 말은 useRef는 React 컴포넌트의 생명 주기와 통합되어 컴포넌트 리렌더링에 영향을 받지 않는다. 반변 getElementById의 경우 컴포넌트 리렌더링에 영향을 받는다. 1-2) 값의 저장 : useRef..