Context 리액트 컴포넌트에서 Props가 아닌 다른 방식으로 컴포넌트 간에 값을 전달하는 방법. 사용이유 Props drilling 부모에서 자식으로만 전달하는 단방향 리액트의 문제. 컴포넌트 트리에서 하위 컴포넌트로 내려주기 위해 그냥 거쳐가기만 하는 Prop들이 생긴다. 따라서 불필요한 props drilling을 지양하기 위해 Context를 사용한다. Provider Context 객체에 포함된 React 컴포넌트. context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할. value prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달한다. 값의 갯수는 제한이 없고, 이를 전달 받을 수 있는 컴포넌트 수의 제한도 없다. Provider 하위에서 context를 구독하는..

한 프로젝트를 시작하기 전 미리 잡아둬야할 부분 정리- 1. 스타일링 CSS 1. 폰트 제일 먼저 사용할 폰트 정하기 주로 웹폰트를 많이 사용하므로 먼저 링크 가져오기. 2. css 초기화 브라우저가 기본으로 가지고 있는 css 속성들 초기화 시키기 3. SCSS 세팅 - 변수 - mixin - 클래스 - 미디어쿼리 2. 공통 컴포넌트 구성 1. 상태관리 세팅 ReactRouter reducer, onCreate, onRemove, onEdit 만들기 2. 프로젝트 state context export const DiaryStateContext = React.createContext(); 컴포넌트 트리를 컨텍스트의 프로바이더로 감싸주고 데이터를 밸류로 전달. 일기 데이터를 관리하는 앱 컴포넌트의 데이터 ..

이벤트 전달 in React.js 이벤트를 전달할 때 주의점 = return문 안에서 태그에 onClick={} 에서 함수에 () 붙고 안 붙고 차이 1. DOM 요소에만 이벤트 설정이 가능. 직접만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 이 예제는 doSth 함수를 실행하는 것이 아닌 이름이 onClick인 props를 MyComponent에게 전달해줄 뿐이다. 2. 함수 형태의 값을 전달 html에서는 "" 안에 실행할 자바스크립트 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달한다 따라서 onClick={doSth} 혹은 onClick={()=>alert('실행')}

Routing 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 router : 데이터의 경로를 실시간으로 지정해주는 역할을 하는 sth route + ing : 경로를 정해주는 행위 자체와 그 과정을 다 포함하여 일컫는 말 Page Routing 브라우저의 요청에 따라 웹 서버가 어떤 페이지를 보여줄 지 결정하는 과정 MPA multipage Application 여러 html 파일로 이루어진 웹 사이트로, 요청할 때마다 새로운 페이지를 전송 요청할 때마다 새로고침 (페이지 깜빡임) SPA single page application 싱글페이지이므로 페이지 이동이 없음 CSR client side rendering 서버와의 통신 없이 브라우저 자체적으로 페이지 업데이트 (로딩이 짦음)..

useReducer 필요성 초반에 배우는 리액트는 대부분 app 컴포넌트 내에서 useState를 이용해 상태 변화 처리 함수를 사용한다. ✨ 상태 변화 처리 함수의 대표적인 예 : onCreate, onEdit, onRemove 하지만 규모가 점점 커지고 처리 내용이 많아질 수록 컴포넌트가 무거워지고 비효율적이다. 따라서 상태 업데이트 로직을 컴포넌트에서 분리, 즉 컴포넌트 외부 혹은 다른 파일에 작성할 수 있도록 하는 것이 useReducer. 사용법 useReducer는 리덕스의 로직과 흡사하다. 👇 2022.08.01 - [코딩공부] - [Redux] 리덕스의 필요성과 구성 요소, 작동 원리 reducer 그렇기에 reducer 함수가 꼭 필요하다. recuder : 현재 상태와 액션 객체를 인자..

Re-rendering in React observing virtual DOM and change the real DOM from virtual DOM to real DOM 출처: https://aboveimagine.tistory.com/101 [비전공자의 IT 취업이야기:티스토리] 리액트에서 컴포넌트가 리렌더링이 되는 조건 본인이 가진 state에 변화가 생겼을 때 부모 컴포넌트가 리렌더링되었을 때 내려받은 props가 변경되었을 때 컴포넌트 최적화 useMemo React Hooks, 컴포넌트 내부에서만 사용 가능 함수가 아닌 값을 반환 값을 메모이제이션 React.memo HOC,고차 컴포넌트 강화된 컴포넌트를 반환함 컴포넌트를 메모이제이션 useCallback 메모이제이션된 콜백을 반환