[패스트캠퍼스] react 강의 학습일지 - 7주차, React

React&Redux로 시작하는 웹프로그래밍_7주차

React 환경설정하는 방법

- Visual Studio Code (Javascript로 만들어진 IDE) 사용

* 추천 Extensions *

1) ES7+React snippets (React 약어들의 모음)

사용방법::

.jsx 파일에서

rfc 치면, function형 컴포넌트를 바로 생성

rcc, react 클래스 컴포넌트를 바로 생성

2) ESLint

3) Indent-rainbow

4) Prettier

5) rainbowbracket

React App (Web app)만들어보기

공식 문서 주소: https://ko.reactjs.org/docs/create-a-new-react-app.html

1. 문서를 참고하여, Node 버전을 확인 후 설치하기

* vscode 터미널에서 node 버전 확인 : node -v

* node 버전 변경하기 (vscode에서 작동하지 않음, 원인: 관리자권한)

powershell을 관리자권한으로 실행후 : nvm use 버전

? node를 설치하는 이유: 로컬에서 리액트 앱이 돌아갈 수 있도록 해주는 환경

npm (node package manager)도 자동 설치되고

npm이 설치되면 npx (node package runner)도 자동 설치된다.

2. vscode 터미널에서 명령어 실행하기

명령어: npx create-react-app my-app

명령어를 실행하면 진행할지에 대하여 물어보면 y누르고 설치하기

3. 설치된 파일 확인하기

4. vscode에서 App 실행하기 - 브라우저에서 열림

   명령어: 

    App 실행하기: cd my-app 후 npm start

    App 종료하기 : Ctrl+C

    * App.js 안의 function App()안에 작성하면 바로 반영된다.

JSX

공식 문서 주소: https://ko.reactjs.org/docs/introducing-jsx.html

JSX란? JavaScript를 확장한 문법

React.createElement의 간편한 표현식

Props

공식 문서 주소: https://ko.reactjs.org/docs/components-and-props.html

Props란? JSX로 전달하는 값

순수한 함수로 사용해야한다.

컴포넌트

공식 문서 주소: https://ko.reactjs.org/docs/components-and-props.html

컴포넌트 합성: 여러 컴포넌트를 모아서 하나의 컴포넌트를 만듦

컴포넌트 추출: 여러 곳에서 사용되거나/복잡한경우 끄집어 내서 사용

State / lifecycle

공식 문서 주소: https://ko.reactjs.org/docs/state-and-lifecycle.html

컴포넌트 내의 상태: 자신의 출력값을 변경

Class component 는 state LifeCycle 로 관리

Functional component는 훅으로 관리

lifecycle: 생성되고 사라지는 순서 (마운트 -> 업데이트 -> 마운트 해제)

주의: state에 props를 복사하지 말것

이벤트 / 합성이벤트

공식 문서 주소: https://ko.reactjs.org/docs/events.html

이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위해 합성이벤트 객체를 받는다.

LIST와 Key

공식 문서 주소: https://ko.reactjs.org/docs/lists-and-keys.html

Key: 고유해야함

FORM

공식 문서 주소: https://ko.reactjs.org/docs/forms.html

제어 컴포넌트 / 비제어 컴포넌트

Hooks

공식 문서 주소: https://ko.reactjs.org/docs/hooks-intro.html

*16.8부터 React 요소로 새로 추가되었으므로 옛 프로젝트에는 없을수 있음

재 사용성에 대한 장점

컴포넌트 사이에서 상태 로직을 재사용하기 어려움

Composition

공식 문서 주소: https://ko.reactjs.org/docs/composition-vs-inheritance.html

컴포넌트 안에서 컴포넌트를 모아서 출력

HOC

공식 문서 주소: https://ko.reactjs.org/docs/higher-order-components.html

고차 컴포넌트는 기존 컴포넌트를 가져와서 새 컴포넌트를 리턴한다.

즉, 인자로 컴포넌트 받고 새로운 컴포넌트로 리턴한다.

Memoization

메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야할때,

이전 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여

프로그램 실행 속도를 빠르게 하는 기술이다.

#패스트캠퍼스 #내일배움카드 #국비지원 #K디지털기초역량훈련 #바이트디그리 #react강의