매일 공부한거 기록하기

리액트 렌더링 과정 component(data)-> 가상돔과 비교-> 실제 돔에 반영 리액트가 실행될때 가장많은 CPU자원을 사용하는것이 렌더링 리액트는 데이터와 컴포넌트 함수로 화면을 그림. 그 과정에서 대부분의 연산은 컴포넌트의 실행과 가상돔에서 발생. 데이터는 컴포넌트의 속성값,상태값을 말함 속성,상태값이 변경되면 리액트가 자동으로 컴포넌트를 이용해 화면을 다시 그림. 리액트 memo함수를 사용하면됨-> 속성값의 변경사항이 없으면 이전 렌더링 결과를 재사용할 수 있다. 렌더링 속도를 개선하기 위해 각 단계에서 할 수 있는 일은? 평상시에는 성능 최적화를 고민하지 말고 편하게 작업하면됨. 성능이슈가 생겼을때 그때 고민하길! 1. 리액트 불변객체로의 속성값 비교 2.gist.github.com/nina..

useEffect 의존성배열을 다루기 까다로운데 거의 의존성 배열을 입력하지 않아도 되지만 종종 필요한 경우가 있다. 쉽게 버그로 이어지므로 가능하다면 의존성 배열을 입력하지 않는게 좋다. async await promise junil-hwang.com/blog/javascript-promise-async-await/ [javascript] Promise, async, await - 개발자 황준일 javascript는 event driven 으로 작동되며 이에 따라 비동기 프로그래밍 해야합니다. 즉, 이벤트가 끝난 후에 코드가 실행 되는 방식입니다. 이 때 많은 사람들이 callback 지옥을 직면하게 되며, promise를 junil-hwang.com

관심사의 분리 복잡한코드를 비슷한기능을 하는 코드끼리 모아서 별도로 관리하는것을 말함 UI를 처리하는 코드 서버API호출하는 코드 DB를 관리하는 코드등을 같은파일에서 관리하면 복잡 -> 이들은 관심사가 다르다고 보고 파일을 분리해서 관리한다. 하나의 컴포넌트에서 모든 기능을 구현할 수 없기 때문에 여러개의 컴포넌트를 만들어 조립한다. 부모의 상태를 별도의 상태값으로 관리하는 것은 좋지않음. 상태값은 일부 컴포넌트로 한정해서 관리하는 것이 좋음. 컴포넌트가 비지니스 로직이나 상태값을 갖고있으면 재사용하기 힘듦. javaScript map, filter-> 공통점 : 기존 배열은 건드리지 않으면서 요소들을 순회한 후 새로운 배열을 리턴한다. map 함수 -> 콜백함수가 적용된 새 요소들을 반환한다. fil..

리액트 내장 훅 useState useEffect useContext useRef : useMemo : 메모리제이션 기능제공 (재사용가능) useCallback : 메모리제이션 기능 제공 (재사용가능) useReducer : 여러개의 상태 값을 하나의 훅으로 관리할때 편리하게 사용가능함. useImperativeHandle useLayoutEffect useDebugValue

1. 엘리먼트 Element 실제로 화면에 렌더링할 DOM노드들의 정보를 React에게 알려주기 위한 수단. DOM노드 혹은 컴포넌트를 표현하는 JavaScript의 일반 불변 객체에 해당함. type문자열 혹은 컴포넌트 함수/ 클래스 필드와 props객체 필드로 표현됨. 일반적으로 하나 이상의 자식 엘리먼트는 props의 children필드로 표현하며, 이를 통해 엘리먼트들이 중첩될 수 있다. 이 필드에는 텍스트에 해당하는 문자열, 엘리먼트, 혹은 엘리먼트들의 배열등이 저장될 수 있다. 일반적으로 JavaScript의 React.createElement()함수 또는 JSX태그 문법 (EX.)으로 작성한다. 엘리먼트들로 이뤄진 트리를 엘리먼트 트리라 부르며, 이는 메모리 상에만 존재하는 가상 돔이다. i..

리액트에서 실제 DOM에 접근해야할때 돔 요소에 focus를 주거나 dom요소의 크기나 스크롤 위치를 알고 싶은 경우 ref속성값을 이용할 경우 자식요소에 직접 접근 할 수 있음. 자식요소는 컴포넌트나 돔요소일수도있다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다. ko.reactjs.org/docs/hooks-overview.html 최상위(at the top level)에서만 Hook을 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요. React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다. (Hook을 호출할 수 있는 곳..

import React ,{createContext} from 'react'; createContext를 import시켜주고 createContext를 이용한다. createContext를 초기값을 넣어 호출해 사용하면 객체가 반환이 됨. 그 객체에는 Provider와 Consumer가 들어있다. Provider에 value를 넣어주면 Consumer에서 그 값을 받아서 처리 할 수 있다.

hook으로 관리함. useLocalStorage.js

1. 하나의 컴포넌트에서 훅을 호출하는 순서는 같아야함. 2. 훅은 함수형 컴포넌트 또는 커스텀 훅 안에서만 호출되어야함. 리액트가 각 훅의 상태를 제대로 기억할 수 있음 규칙2에 의해 클래스형 메서드 뿐 아니라 기타일반 함수에서도 사용할수없음 훅은 함수형 컴포넌트를 위한 기능임.

컴포넌트에 기능을 추가할때 사용하는 함수 - 컴포넌트에 상탯값 추가, 자식요소에 접근 - 리액트 16.8에 새로 추가됨 그 전에는 클래스형 컴포넌트 사용 클래스형 컴포넌트보다 장점이 많으며 리액트 팀에서도 훅에 집중하고 있음 리액트 훅으로 작성하는것을 추천함. useState :상탯값 추가 useEffect :부수 효과 처리 - 외부의 상태를 변경하는 것을 말함. - 서버 API호출, 이벤트 핸들러 등록하고 해제 하는 등의 효과를 부수 효과라고함. ReactDOM.unstabel_batchedUpdates() 1. useEffect(effect) ==> 컴포넌트가 렌더링될 때마다 호출됩니다. 2. useEffect(effect, []) ==> 첫 번째 렌더링 후에만 호출됩니다. 3. useEffect(e..