React5 React-Hooks 사용하기(5) 1.Hook의 개요 https://ko.reactjs.org/docs/hooks-intro.html Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org Hooks?! useState, useEffect, useMemo, useCallback, useReducer, etc... useState 1) state 만들기 import {useState} from "react" //react 기본 내장 함수 //import React from "react"; //함수형 변수선언 const [isChecked, setIsChecked] = useState(false); //다른 방식 const [isChecked,setI.. 2023. 2. 8. React-State(4) State https://ko.reactjs.org/docs/faq-state.html 컴포넌트 State – React A JavaScript library for building user interfaces ko.reactjs.org 얕은 복사, 깊은 복사 2023. 2. 7. React-components&Props(3) 개념적으로 component는 Js 함수와 유사 "props"라고 하는 임의의 입력을 받은후 화면에 어떻게 표시되는지를 기술하는 React element를 반환 1. 함수 컴포넌트와 클래스 컴포넌트 //함수형 컴포넌트 //단순한 JS함수 //클래스보다 함수 컴포넌트를 더 많이 쓰는 추세 function Welcome(props){ return Hello, {props.name}; } welcome이라는 컴포넌트 , 데이터를 가진 하나의 "props"(속성을 나타내는 데이터) 객체 인자를 받은 후 React element를 반환 //클래스 컴포넌트 class Welcome extends React.Component{ render(){ return Hello, {this.props.name}; } } //예.. 2023. 2. 7. React-Virtual DOM(2) Virtual DOM(가상 돔) 기존의 DOM(HTML)의 성능 저하, 많은 비용 초래하는 것을 보완 1.JS의 경우 불필요한 변화, 성능 저하, 많은 비용 초래 2.JSX(virtual DOM 사용) 필요한, 변경된 부분만 감지 결론 JS의 경우 부모태그의 div태그까지 변화하였으나, React의 경우에는 virtual DOM(가상담)을 이용하여, 변경된 부분만 감지 ===> Reflow, repaint 과정의 최소화 2023. 2. 2. 이전 1 2 다음
