리액트5 React : 리액트 작동 원리 이해하기 useState, useMemo, useCallback, react DOM React : 리액트 작동 원리 이해하기 React 리액트는 자바스크립트 라이브러리입니다. 리액트의 핵심은 컴포넌트이며, 이런 컴포넌트화 기능을 활용해 화면을 효과적으로 구성하는 역할을 합니다. React DOM 리액트 DOM은 웹에 대한 인터페이스입니다. 리액트는 컴포넌트의 상태 관리 라이브러리라고 보아야 하며, 가상 DOM 은 컴포넌트 트리를 결정합니다. 리액트는 상태나 props, 컨텍스트, 컴포넌트에 변경이 발생하면 컴포넌트 함수가 재 실행되어 리액트가 이것들을 다시 평가하게 됩니다. 핵심 리액트 컴포넌트는 상태나 이 외의 것들에 대해 재평가 되고, DOM은 과거와 현재의 상태에서 변경되어야하는 부분만을 감지하여 효율적으로 변경해줍니다. 가상 DOM에선 이런 원리로 차이점만을 변경함으로써 바뀐 부.. 2023. 8. 6. React Err : npm start 안되는 오류 해결 --openssl-legacy-provider React Err : npm start 안되는 오류 해결 --openssl-legacy-provider 문제 유데미 강의를 듣던 중 npm start가 제대로 실행되지 않는 현상이 발생했다. thow err 라는 문구와 함께 밑에 경고메세지들이 출력되었음. 간단히 보니 node 버전 업데이트 사항과 직결된 문제였다. (이래서 안전한 버전을 사용하는 것이 좋다) Starting the development server... Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:133:10) at module.e.. 2023. 8. 3. [React] input 상태 업데이트 useState,useRef ref (reference) 에 대해 알아보자 ref 는 React에서 사용할 때, useRef 로 변수에 담아 사용이 가능하다. ref 기본기능을 간단하게 설명하자면 다른 DOM에 접근해서 작업이 가능하도록 해준다. ( 이외에도 활용되는 기능이 매우 많지만 input에 관해서만 적어내리도록 하겠다) useState 는 우리 모두가 알고 있듯이 React에서 상태를 관리할 수 있도록 도와주는 기능이다. // ref const ref = useRef(); // useState const [state, setState] = useState(null); useState는 이런식으로 상태가 관리된다 입력 > 상태함수 실행 > 함수로 인한 state값 업데이트 > input 필드 값 변경 ( ref에서 삭제가능 .. 2023. 4. 8. [React] createPortal 사용해 효율적으로 모달 관리해주기 모달은 어디에 넣어야 할까? 사실 퍼블리셔로 시작한 나로써는 최적화적인 면도 중요하지만 DOM 의 구조를 잘 파악하고 체계적이고 직관적인 구조로 짜는것이 가장 베스트의 코드라 생각한다. 특히나 모달의 경우는 머리로는 구현이 쉽지만 상태 모달부터 시작해 기능과 submit 모달 등등 다양한 기능을 가지고 있다. 실시간으로 뿜어져나오는 여러 모달을 처리하기엔 최적화적인 코드를 사용하고싶지만 그것도 쉽지않다. 구조적으로 하위 내용과 div 로 감싸진 곳에선 모달을 사용하지 않는 편이 좋다. css 코드를 만지다보면 가끔 z-index 를 무작위로 사용하는 경우가 많은데 이 점을 고려하지 않고 모달작업을 하면 상위 position에 맞춰 모달이 본인에 위치를 잃어버린다. 하위에서 아무리 z-index 를 우겨넣.. 2023. 4. 8. [React] 클릭(click)이벤트 기초정리 onClick react에선 이벤트 함수들은 'on~'으로 시작한다. 때문에 click 이벤트를 발생시키려면 onClick 이벤트를 호출해야하는데 onClick을 사용할때 함수명을 clickHandler 또는 clickHandler() 로 선언하는것에 차이가 있다. 보통 react에선 ()를 통해 함수를 식별하기 때문에 ()괄호를 붙여서 함수를 이벤트에 넣은 경우 JSX가 읽혀질때 click이벤트로 같이 호출된다. 때문에 click 시에만 동작하게 하려면 괄호를 제거하고 사용해야한다. 👉 예시 import React from "react"; import Card from "../UI/Card"; import ExpenseDate from "./ExpenseDate"; import "./ExpenseIte.. 2022. 12. 4. 이전 1 다음 반응형
