뇌 채우기 공간

■ 가상돔이란? DOM은 html단위를 하나하나 객체로 생각하는 모델이다. 예를 들면 div태그라는 객체는 텍스트 노드, 자식 노드, 등등 하위의 어떤 값을 가지고 있는 구조 이런 구조를 트리 구조라고 한다. DOM트리 중 하나에서 수정이 일어날때마다 모든 DOM을 뒤지고 수정할 것을 찾아서 싹 수정을 하면 필요없는 연산이 너무 많이 일어나기 때문에 가상돔이 등장했다! 기존 DOM과 어떤 행동 후 새로그린 DOM을 비교해서 바뀐 부분만 갈아끼워준다. 돔 업데이트 처리가 간결하다!! ■ 라이프 사이클이란? 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질때까지 컴포넌트는 생성되고-> 수정되고-> 사라진다. 생성: 처음으로 컴포넌트를 불러오는 단계 수정: 사용자의 행동으로 데이터가 바뀌거나, 부모 컴..

styled-components를 사용하기 터미널에서 yarn add styled-components로 패키지를 설치해준다. App.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 import React from 'react'; import logo from './logo.svg'; // BucketList 컴포넌트를 import 해옵니다. // import [컴포넌트 명] from [컴포넌트가 있는 파일경로]; import BucketList fro..

코드를 확인하자! 더보기 App.js import React from "react"; import logo from './logo.svg'; import './style.css'; import Start from "./Start"; class App extends React.Component{ constructor(props){ super(props); this.state = { name: "꼬미" }; } render () { return ( ) } } export default App; Start.js import React from 'react'; import img from "./scc_img.jpg"; const Start = (props) => { console.log(props); // 컴포..

App.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 import React from 'react'; import logo from './logo.svg'; import './App.css'; // BucketList 컴포넌트를 import 해옵니다. // import [컴포넌트 명] from [컴포넌트가 있는 파일경로]; import BucketList from './BucketList'; // 클래스형 컴포넌트는 이렇게 생겼습니다! class App extends React.Component { constructor(props){ super(props); // App 컴포넌트의 state를 정..

■ 함수형 컴포넌트 BucketList.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 // 리액트 패키지를 불러온다. import React from 'react'; // 함수형 컴포넌트는 이렇게 쓸 수도 있고 // function Bucketlist(props){ // return ( // 버킷 리스트 // ); // } // 이렇게 쓸 수도 있다.. =>가 들어간 함수를 화살표 함수라고 한다. // ()안에 props는 부모 컴포넌트부터 받아온 데이터다. // 얘의 부모가 누구냐? const BucketList = (props) => { // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트)를 반환한다. return ( 버..