kalpa

https://react-anyone.vlpt.us/04.html 4편: props 와 state · GitBook 4편: props 와 state 리액트 컴포넌트에서 다루는 데이터는 두개로 나뉩니다. 바로 props 와 state 인데요, 미리 요약하여 설명드리자면 props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값입니다. 자 react-anyone.vlpt.us props 부모가 자식에게 내용을 전달할 때 사용 App은 객체를 생성해서 new MyApp.js 해서 값을 대입(초기화)해서 사용 이전에 MyApp class를 만들어서 초기화 대상을 지정 this.props.name 과 같이 state

render() 에서 구현하는 것은 jsx로 구현해야함(html 아님 -> javascript ) 반드시 태그는 닫아 주어야함 두개 이상의 엘리먼트는 반드시 하나의 엘리먼트로 감싸줘야함(Fragment 사용으로 불필요한 tag rendering 제거 가능) 변수의 처리는 중괄호를 사용해서 사용 가능 변수 지정에는 var(ES6에서 사용안함), const(상수), let 있음 if 문을 사용하는 방법은 3항 연산이나 && 구문을 사용 가능(하나의 tag에 여러개 지정 안됨) 여러 조건을 지정하기 위해서는 function을 지정해서 가능 ==> 호출('괄호로 닫고')하고 사용해야(괄호로 지정) 화살표 함수도 있음 https://react-anyone.vlpt.us/03.html 3편: JSX · GitBoo..

지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위한 것 변화가 있으면 변경 시키지 말고 새로 만들자... 여기서 Virtual DOM을 사용 => 바뀐 데이터를 만들어 놓고 변경된 부분만 변경함 참조 사이트 https://doqtqu.tistory.com/318#1.%20Virtual%20DOM%20%EB%8F%99%EC%9E%91%20%EB%B0%A9%EC%8B%9D Virtual DOM vs Incremental DOM React에 익숙하다면 Virtual DOM이라는 개념에 대해 한 번쯤 들어봤을 것이다. Virtual DOM은 UI 성능을 향상시킴으로써 React의 인기에 기여한 주요 역할 중 하나이다. Angular가 2019년에 새로운 Renderer Angula doqtqu.tis..

프로젝트 초기 실행 프로젝트를 생성하면 public과 src 폴더가 생성됨 public에는 html 관련 파일이 저장되고, src에는 js , css 파일이 생성됨 js App이 html로 rendering되는 순서는 html에서 id를 정의() index.js에서 id가 root 인 요소를 찾아서 App.js를 매핑 reactDOM.render(, document.getElementById('root'); 기본 import 변경 :import ReactDOM from 'react-dom'; 기본은 import ReactDOM from 'react-dom/client'; const root = ... ; App.js에 실행할(html에 rendering 할) 내용을 구현 실제 구현 되는 내용은 App.j..

React for Beginners @@@ 프로젝트 생성 및 실행 하기 =============== npm create vite@latest => 내용 나오는데로 따라 하면됨 npm create-react-app 맵이름 build => npm run build @@@ 기본 설치 라이브러리(no typescript) @@@ npm i bootstrap react-bootstrap npm i -D sass npm i react-icons npm i axios npm install react-router-dom localforage match-sorter sort-by npm i react-hook-form@7.43 @@@ sass 설치 ============== npm i -D sass 로 설치하시면 됩니다..