[문제 해결] 리액트 console이 2번씩 찍히는... 리액트를 처음 다룰 때 이 값이 잘 넘어왔는지 연결이 잘되는지를 확인하기 위해 주로 console에 아무거나 값을 찍어본다던지 event.target을 찍어본다던지 console을 자주 사용하는데 그때마다 콘솔이 2번씩 찍히곤 하는 경험을 한다. 워낙 많은 사람들이 궁금해 하는 문제라서 그런지 구글링에 답이 수두룩하게 나와서 나도 정리를 해놓고자했다 리액트 console이 2번씩 찍히는 이유를 알기전에 먼저 StrictMode가 무엇인지를 알아야 한다 # StrictMode 란? : 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구 -Fragment와 같이 UI를 렌더링 하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화 -애플리케이션 내 어디서든 strict모드 활성화 가능 StrictMod.. 2022. 11. 18. [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. 이전 1 2 다음
