정리하기전에 SPA와 CSR, MPA와 SSR을 묶어서 좀 정리하려고 한다. 물론 같은 말은 아니지만 묶어서 정리하는게 이해하기 편해서... SPA와 MAP의 차이점 요약정리 대충 SPA와 MPA의 차이점을 요약하면 위와 같다.. SPA와 CSR의 특징 SPA(Single Page Application): SPA는 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 어플리케이션이나 웹사이트를 말한다.(단일 페이지 어플리케이션) CSR(Client Side Rendering): CSR은 웹페이지의 콘텐츠를 클라이언트(웹 브라우저)에서 랜더링 하는 방식을 말한다. 필요한 데이터만을 서버통신으로 가져와 클라이언트에서 랜더링 하는 방식을 일컫는다. V..
Vue프로젝트 할 때, 쓰기만 했지 정리를 안해서.. 이번에 리액트 공부하는김에 라우트 정리를 좀 하려고 한다.. 페이지 라우팅이란? 리액트 라우터 설치 1. 리액트 라우터 설치 react-router-dom 설치 명령어 npm i react-router-dom 그냥 npm으로 설치하면 되니 어렵게 생각안해도 된다.. 위와 같이 package.json의 dependencies객체에 react-router-dom이 추가 되었다면 됬다.. 리액트 라우터 설정 방법 라우터를 사용할 때, 작성은 크게 다음과 같은 순서로 작성하면 된다. 1. 로 라우터를 적용할 상위컴포넌트를 감싼다. 2. 로 들을 감싼다. 3. 에 URL경로와 해당 URL경로로 접근시 변경 해줄 컴포넌트를 path와 element 속성에 담아준..
오늘은 그냥 리액트에서 Context를 사용하는 또 다른 방법을 정리해보려고 한다.. Context.Provider 분리하는 이유 유튜브에서 Context관련 글을 검색해 보는데, 다음과 같은 영상이 눈에 들어왔다. 썸네일만 보면 Context 컴포넌트의 Provider 프로퍼티를 쓰지 말고, Comtext.Provider 컴포넌트를 만들어 써라 라는 느낌의 그림이다. 대충 내용만 요약하자면, Context컴포넌트를 따로 모듈로 분리해서 사용해라인데, 그 이유는 일반적으로 상위 컴포넌트에서 하위 컴포넌트들에게 데이터를 전달하기 위해 를 쓰면 state가 변경되면서 useContext로 데이터를 받지 않는 다른 자식컴포넌트 즉, 모든 컴포넌트가 리랜더링 되니 성능상 좋지 않다. 라는 내용이었다.. 위 영상..
Context란? 1. useContext란? React의 Context란 컴포넌트간의 데이터를 전달하는 방법이다. props와는 달리 createContext훅과 useContext훅을 이용하여 컴포넌트간 데이터를 전달 할 수 있다. 2. useContext를 왜 사용하는걸까? 그럼 props를 이용해서 컴포넌트간 데이터를 전달하면 되는거 아닌가? 라는 생각이 들 수 있다. 근데 props에는 커다란 문제가 있었는데.. 자기 자식한테만 보낼 수 있다는 문제이다.. 뭐 고작 그런거 가지고? 라고 할 수 있는데, 만약 자식컴포넌트가 엄청 많다면? 아래와 같은 문제가 발생한다.. 자식의 자식의 자식의 자식까지 계속 props로 전달해야 한다. 즉 한번에 보내지 못한다는 문제.. 이런 걸 Props Drill..
리액트에서 상태를 관리하기 위해 useState나 useReducer나 이것 저것 쓰는데..이때 어떻게 상태 업데이트 함수를 사용하냐에 따라 결과가 달라진다.. 함수형 업데이트 기본문법 ## 기본문법 setNumber((상태) => 상태 업데이트 로직); ## 샘플 setNumber((number) => number + 1); 함수형 업데이트란? 함수형 업데이트(Functional Update)는 React에서 상태를 업데이트하는 데 사용되는 패턴 중 하나입니다. 이 패턴을 사용하면 이전 상태에 의존하여 새로운 상태를 계산할 수 있습니다. 주로 useState 훅이나 클래스형 컴포넌트의 setState 메서드에서 사용됩니다. 함수형 업데이트를 사용하는 이유??? 다들 알다시피, 리액트에서의 훅은 비동기적..
useCallback이란? useCallback은 리렌더링 간에 함수 정의를 캐싱해 주는 React Hook입니다. -- 리액트 공식문서 결론만 말하면 함수가 리랜더링 되는 것을 방지해주는 훅 중 하나이다.. 레퍼런스 const cachedFn = useCallback(fn, dependencies) 매개변수 fn: 캐싱할 함숫값입니다. 이 함수는 어떤 인자나 반환값도 가질 수 있습니다. React는 첫 렌더링에서 이 함수를 반환합니다. (호출하는 것이 아닙니다!) 다음 렌더링에서 dependencies 값이 이전과 같다면 React는 같은 함수를 다시 반환합니다. 반대로 dependencies 값이 변경되었다면 이번 렌더링에서 전달한 함수를 반환하고 나중에 재사용할 수 있도록 이를 저장합니다. Reac..