매일 공부한거 기록하기

리액트에서 실제 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..

useEffect() 리액트 요소 트리 렌더단계 가상돔 변경사항 파악 단계 -> 커밋단계 실제돔에 반영하는 단계 변경사항 파악하기 위해 가상돔을 상요함 가상돔은 리액트요소에서 부터 만들어짐 이전의 가상돔과 비교함 실제 돔의 변경사항을 최소화 하기 위한 과정임 ㅎ

리액트는 속성값이나 상탯값으로 관리해야함 리액트가 값에 변경 사실을 알려면 상태값으로 관리를 해야함. React.memo React.createPortal (modal)을 위해서 사용

전통적인 방식에서 MPA는 클라이언트가 초기요청을 보내면 서버는 HTML을 보내고 페이지 전환을 요청하면 다시 서버에서 HTML을 보내서 Page Reload의 반복 단일 페이지 애플리케이션에서는 필요할때만 데이터를 요청해서 받아옴. 페이지 전환은 자체적인 라우팅 처리를 함. SPA가 가능하기 위한 조건 1. 자바 스크립트에서 브라우저로 페이지 전환 요청을 보낼 수 있다. 단 브라우저는 서버로 요청을 보내지 않아야함. 2. 브라우저의 뒤로가기와 같은 사용자의 페이지 전환 요청을 자바스크립트에서 처리할 수 있다. 이때도 브라우저는 서버로 요청을 보내지 않아야함. 브라우저는 자바스크립트에서 알려줘야함. 3. 위 조건을 만족시키는 브라우저API -push State, replaceState함수 -> 자바스크립..

일반적인 CSS파일 css-module 로 작성 Sass로 작성 css-in-js로 작성 1.일반적css:컴파일된 css에서 변수명이 겹치면 이름이 충돌하는 문제가 발생함. 2. css-module사용:css-module을 사용하면 이름 충돌을 막을 수 있다. 3.Sass사용:sass에는 node-sass패키지를 설치해야함. npm install node-sass 4. css-im-js npm install styled-components

01. create-react-app 으로 시작하기 환경을 구축해줌. 터미널에 npx create-react-app 프로젝트명 입력. npx create-react-app 프로젝트명 create-react-app은 서버사이드 렌더링을 지원하지 않음. create-react-app 단점 : 빌드시스템 eslint 설정을 거의 변경 할 수 없음. 서버사이드 렌더링이 필수, 설정변경 필요한 프로젝트라면 Next.js를 선택. 02. create-react-app 명령어입력 public 폴더, src폴더 package.json 파일 등이 설치 됨. package.json에서 create-react-app version up될때는 "React-scripts"의 version 이 올라갔을때가 대부분. browser..