• VSCode extended program ESLint Reactjs Code Snippets Prettier-Code formatter
• 리액트를 다루는 기술

Ch1. 리액트 시작

1. 왜 리액트인가? MVC 패턴에서 기존 View를 날려버리고 새로 렌더링 why? application scale이 커지면 code 복잡성과 성능 저하 ※ MVC 패턴? Model: 데이터 관리 View: 사용자 보이는 화면 Controller: 사용자 <-> 데이터 CRUD

• 최대한 성능을 아끼고 UX을 제공
  1. 리액트 특징 Virtual DOM: 새로 만들어진 DOM

Ch2. JSX

1. JSX란? UI를 렌더링 html: <div> keyword 무조건 삽입 css: <div className="react"> js: { // code }

Ch3. 컴포넌트

1. 클래스형 컴포넌트

• state 기능, 라이프사이클 기능, 임의 메서드를 정의 ※ 함수형 컴포넌트는 state, 라이프사이클 기능이 없다 But => 함수형 컴포넌트 + Hooks

2. 컴포넌트, props props(컴포넌트 속성) 특징: 부모->하위 컴포넌트, 읽기만 가능 destructing assignment: 객체에서 값을 추출하는 문법

3. state

   • 컴포넌트 내부에서 바뀔 수 있는 값 setState: 비동기
   • 객체 대신 함수를 넣어주면 같은 작업을 두 번 반복할 수 있음

   state로 DOM의 값(value)를 핸들링하는 것 연습문제: 함수형 컴포넌트로 증가/감소 함수 만들기

Ch4. 이벤트 핸들링

이벤트란? 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것 https://reactjs.org/docs/events.html ※ DOM의 이벤트(e.g. onClick, onChanged, etc)를 react로 핸들링하는 것

Ch5. ref: DOM에 이름 달기

ref: 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법 언제 사용하는가: DOM을 꼭 직접적으로 건드려야 할 때 (e.g., focus) 어떻게 사용(클래스형 컴포넌트)

1. 콜백 함수
2. 리액트 내장 함수: createRef 둘 중 하나 편한 방법 사용 컴포넌트에도 ref을 달 수 있음 -> 컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할 때 사용

Ch6. 컴포넌트 반복

목적: 반복되는 코드는 효율적으로 관리하기 위해 ※ 기존 배열로 새로운 배열을 만들어 설정: map or filter 활용 ※ 컴포넌트 배열을 렌더링할 때는 key 값 설정에 항상 주의