Ming's develop story

라이프 사이클 함수는 클래스형 컴포넌트에서만 사용할 수 있다. 라이프 사이클을 아는 건 중요한데 왜 우리는 클래스형 컴포넌트보다 함수형 컴포넌트를 많이 쓰냐? 리액트 공식 매뉴얼에서 함수형 컴포넌트를 더 권장하기 때문이다 (리액트 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 자체를 읽고 쓸 때의 성능은 자바스크립트..

1. 기획서를 보고, 새로운 오늘의 TODO 페이지를 만들기 .title { color: blue; text-decoration: underline; } .wrap { display: flex; align-items: center; } .mini-card { border: 1px solid black; border-radius: 5px; padding: 2em; margin: 1em; } button { width: 80px; } button:hover { background-color: coral; } 오늘의 할 일 추가! function completeTodo(e) { console.log('완료했어') console.log(e.target) //event 속성을 사용해 콘솔에서 자신의 위치를 찾고 ..

개발자 도구를 열고 에러를 보는 것은 절대 까먹으면 안된다! (F12나 [Cmd +Opt + i ](맥), [Ctrl + Shift + i](윈도우) 또는 마우스 우클릭+검사를 눌러 개발자 도구를 열 수 있다) JSX 규칙 1. 태그는 꼭 닫아주기 원래 이렇게 닫아줘야 하는데 이런식으로 태그를 닫아주지 않으면 아래와 같은 빨간 화면을 만나볼수 있다. 2. 무조건 1개의 엘리먼트를 반환하기 이처럼 2개의 엘리먼트를 반환하면 아래와 같이 오류가 생긴다. Tip. 반환하는 값이 아예 없어서도 안된다. 그래서 null이라도 반환 해주어야 한다. 3. JSX에서 javascript 값을 가져오려면? 변수를 선언하고 {}-중괄호 안에 변수명을 써서 javascript 값을 가져올 수 있다. 만약 중괄호를 쓰지 않고..

npm을 통하여 yarn 설치 및 버전 확인 bash 터미널을 이용하여 진행 npm - 노드 패키지 매니저 npm, npx를 쓸 수도 있는데 yarn을 쓰는 이유는 속도가 조금 더 빨라서이다. 다른 것을 사용해도 무방하다. CRA(creat react app) 패키지 설치 리액트로 웹사이트를 만들때 필요한 모든것을 갖고있는 패키지이다. 마지막에 Done in 시간이 나오면 설치가 완료된 것이다. React 프로젝트 폴더 만들기 추가 - 위 사진과 같이 나와야 프로젝트가 다 만들어진 것이다. 이후 아래와 같이 week-1 폴더에 들어가서 yarn start를 해준다. yarn이 정상적으로 실행이 되면 http://localhost:3000/의 홈페이지가 자동으로 켜지는데 만약 켜지지 않는다면 직접 들어가도..