1. 가상돔 DOM은 트리구조: 부모 - 자식 노드 등 하위의 값을 가진 구조 돔 트리 하나가 수정이 필요하다면 모든 돔을 다 수정해줘야하기때문에 매우 불편하기때문에 가상돔이 등장(페이스북이 사용) 2. 처음 진입했을때, 데이터가 변했을때 돔을 그리고 갈아끼우는것 -> 렌더링, 리렌더링 라이프 사이클 컴포넌트가 렌더링을 준비하는 순간부터 페이지에서 사라질 때까지 과정 생성: const(constructor)생성 - 렌더링 - componentDidMount 호출 업데이트: 리렌더링 - 리액트 돔 업그레이드 - componentDidUpdate(업데이트 됐다는 걸 알려주는 함수 호출) 업데이트는 state나 props나 부모컴포넌트가 변했을 때 (강제 업데이트: forceUpdate()) 제거: compo..

스타일 컴포넌트 패키지 설치 yarn add styled-components 스타일 컴포넌트를 사용하면 클래스 이름짓기로부터 해방 될 수 있다. 컴포넌트에 직접 스타일을 입힌다. -> 코드 직관적, 깔끔 (CSS-in-JS) 스타일 컴포넌트에도 데이터를 받아 올 수 있다. 아래처럼 자바 스크립트 문법 삼항연산자도 사용가능

1. node-sass 패키지 설치 yarn add node-sass@4.14.1 open-color sass-loader classnames 2. scss파일 생성 기본문법은 css와 동일하기때문에 css파일과 동일 코드 작성해줘도 정상 작동 함 SCSS특징 1. nesting이 가능하다. 2. 상위 요소 이어쓰기는 "&"로 클래스명, 글자 등 이어쓸 수 있다. 3. 변수를 쓸 수 있다.

1. NVM설치하기 2. 설치 확인은 nvm --version 3. nvm으로 노드 설치하기 nvm install [설치할 버전] 4. 설치 확인 nvm ls -> nvm으로 설치한 노드 버전 리스트 확인 명령어 node -v -> 노드 버전 확인 5. nvm에서 사용 중인 노드 버전 바꾸기 nvm use [사용할 노드 버전] 6. npm(노드 설치할때 함께 설치됨)으로 yarn 설치하기 7. npm install -g yarn 8. yarn으로 패키지 설치할 땐 yarn add [옵션] [설치할 패키지 이름] 9. yarn으로 CRA설치하기 yarn create react-app [프로젝트 이름] 참고로 프로젝트 이름 생성시엔 한글 안됨

리액트 프로젝트 생성 후 기본적인 파일들을 알아보자! index.html -> 빈 껍데기 html파일: 파일안에 아무런 내용은 없지만, react모듈, react-dom모듈 그리고 App.js파일을 불러오고있다. app.js 파일에서 JSX문법의 함수형 컴포넌트를 이용해 빈껍데기 html에 필요한 것들만 보내서 실제 웹 페이지를 구성한다. 이런 형식을 SPA(=Single Page Application)라고 부른다. 리액트는 JSX문법을 사용해 리액트 요소를 만들고 DOM에 렌더링 시켜 뷰를 그린다. *JSX는 확장된 자바스크립트 JSX사용법 *개발자 도구 맥 단축키 [cmd + opt + i] 1. 태그는 꼭 닫아주기 2. 무조건 1개의 엘리먼트 반환 3. JSX에서 자바스크립트 값을 가져오거나 map..