Ming's develop story

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를 정의해줍니다. this.state = { list: ['영화관 가기', '매일 책읽기', '수영 배우기'], }; } // 랜더 함수 안에 리액트 엘리먼트를 넣어줍니..

BucketList.js // 리액트 패키지를 불러온다. import React from 'react'; // 함수형 컴포넌트는 이렇게 쓸 수도 있고 function Bucketlist(props){ return ( 버킷 리스트 ); } // 이렇게 쓸 수도 있다. =>가 들어간 함수를 화살표 함수라고 한다. // () 안에 props! 부모 컴포넌트에게 받아온 데이터이다. // js 함수가 값을 받아오는 것과 똑같이 받아온다. const BucketList = (props) => { // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 부른다.)를 반환해준다. return ( 버킷 리스트 ); } // 우리가 만든 함수형 컴포넌트를 export 해준다. // export 해주면 다른 컴포넌트에서 Buc..

1. Component란? 리액트가 레고라면 컴포넌트는 블록이다. 클래스형, 함수형으로 나뉜다. 이 코드를 조각조각 내보면 아래와 같이 나눌 수 있는데 나눈 조각 하나하나를 컴포넌트라고 부른다. 즉, 이 웹 사이트는 크게 , , 세 개의 컴포넌트가 있고, 컴포넌트는 , 컴포넌트로 이루어져 있는 것이다. 2. State 와 Props state는 Component가 가지고 있는 데이터이다. 아까 사이트 조각 중 컴포넌트를 예로 들면 헤더에 들어갈 데이터는 로고 이미지 경로, 메뉴 이름 등이 있다. 이 데이터는 나 컴포넌트에서는 쓰지 않는다. 즉, 컴포넌트에서만 쓰는 정보이다. state는 한 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 생성, 수정하는 데이터이다. 생성도 수정도 오직 해당 컴포넌트 내에서만..

라이프 사이클 함수는 클래스형 컴포넌트에서만 사용할 수 있다. 라이프 사이클을 아는 건 중요한데 왜 우리는 클래스형 컴포넌트보다 함수형 컴포넌트를 많이 쓰냐? 리액트 공식 매뉴얼에서 함수형 컴포넌트를 더 권장하기 때문이다 (리액트 16.8버전부터 등장한 React Hooks으로 라이프 사이클 함수를 대체할 수 있거든요.) 더 많은 라이프 사이클 함수는 공식 문서에서 확인할 수 있다. 코드를 보며 복습해보자! import React from "react"; // 클래스형 컴포넌트는 이렇게 생겼습니다! class LifecycleEx extends React.Component { //extends는 확장 - 자식이 부모클래스꺼를 가져온다. // 생성자 함수 - 초기값들을 설정해준다. constructor(p..

1. 가상 돔(Virtual DOM)이란? Virtual DOM이란? (메모리 위에서만 돌아가서 눈에 보이지 않음) 화면에 변화가 일어났을 때 더 적은 리소스로 빠르게 업데이트를 한다. 개념적으로는 브라우저에는 실제 DOM이 아닌 리액트가 생성한 가상 DOM(Virtual DOM)을 렌더링한 후 엘리먼트가 변경될 경우 React가 변경 내용을 연산해서 가상 DOM에서 필요한 부분만 업데이트 한다. react는 왜 DOM에 바로 접근하는 대신 Virtual DOM을 사용하여 접근하는 것인가? 그 이유는 바로 성능에 있다. DOM을 자주 조작하면 성능에 많은 영향을 끼치기 때문에 속도가 느려진다. 그렇다고 DOM이 느리다는 것이 아니다. DOM 자체는 빠르고, DOM 자체를 읽고 쓸 때의 성능은 자바스크립트..