[Hook] useContext useContext란? context 객체에서 반환된 값을 받아 그 context의 현재 값을 반환한다 - context의 현재 값은 트리 안에서 이 Hook을 호출하는 컴포넌트에 가장 가까이에 있는 의 value의 값에 의해 결정된다 -컴포넌트에서 가장 가까운 가 갱신되면 useContext는 그 provider에게 전달된 가장 최신의 context value를 사용하여 렌더러를 트리거한다 -상위컴포넌트에서 React.memo 또는 shouldComponentUpdate를 사용하더라도 useContext를 사용하고 있는 컴포넌트 자체에서 부터 다시 렌더링 된다 useContext로 전달되는 인자는 context 객체 그 자체여야 한다 맞는사용 : useContext(MyContext) / 틀린사용 : .. 2022. 10. 23. [React] Context API Context Context API는 리액트 프로젝트에서 단계마다 일일이 props를 넘겨주지 않고 전역적으로 사용할 데이터가 있을 때 유용한 기능이다 -예시 : 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 - 로그인 데이터, 웹 내 사용자가 쓰는 설정 파일, 테마, 언어 등 다양하게 컴포넌트간 공유되어야할 데이터로 사용 - redux, react-router, styled-components 등의 라이브러리는 Context API를 기반으로 구현되어 있다 # Context API 사용법 createContext import {createContext} from 'react'; const MyContext = createContext({color:'black'}); export default .. 2022. 10. 23. [React] Immer란? Immer 란? React에서 불변성을 유지하는 코드를 작성하기 쉽게 해주는 라이브러리 Immer 라이브러리를 사용하면 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트 해줄 수 있다. React 컴포넌트에서 상태를 업데이트 할 때불변성을 지키는 것은 매우 중요하다고 명시하고있고 Immer를 검색하면 제일먼저 보이는 것이 불변성이다 # 불변성이란? 불변성을 지킨다는 말은 '기존의 값을 직접 수정하지 않으면서 새로운 값을 만들어 내는 것을 말한다' 내가 이해한 '불변성을 지킨다' 는 배열 array가 있을 때 이 array의 요소를 직접 수정하지 않고 추가 : concat(인자로 주어진 배열이나 값을 기존 배열과 합쳐서 새로운 배열은 만든다) 삭제 : filter(주어진 조.. 2022. 10. 20. SPA(Single Page Application) vs MPA(Multi Page Application) SPA(Single Page Application) 인터렉션이 발생할때마다 서버로부터 새로운 파일을 받아 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 웹페이지 구성방식 - 한개의 페이지로 구성된 웹 Application - SPA는 CSR(Client Side Rendering) 방식으로 렌더링 - 단 한번만 리소스(HTML, CSS, Javascript)를 로딩하고 데이터를 받아올때만 서버와 통신 - 첫 요청시 딱 한페이지만 불러오고 페이지 이동시 기존 페이지의 내부를 수정해서 보여주는방식 - 최초 페이지를 로딩한 시점부터 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 렌더링해줌 - 필요한 부분만 렌더링 해주기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 UX 제공Angular,.. 2022. 10. 18. 이전 1 2 다음
