#1. react 익숙해지기

Achievement Goals

React 기본

• React를 이용한 컴포넌트 단위 개발의 장점을 이해할 수 있다.
  • 요즘 웹페이지는 유저와 많은 interaction이 일어나(ex. button) 수많은 상태 관리가 필요하다.
  • 돔 관리와 상태 관리 말고 기능 구현에 집중하고 싶은 욕구가 있었고, React, Angular, Vue가 탄생했다.
  • 리액트는 component (하나의 의미를 가진 독립적인 단위 모듈) 개념에 집중하고 있는 라이브러리다.
  • 직관적과 재사용성이 증가한다.

 

• JSX와 같이 선언적인 형태의 문법을 사용하는 것의 장점을 이해할 수 있다.
  • 리액트는 기본적으로 ES6를 사용한다.
  • Destructuring, Spread operator, rest parameters, default parameters, template literals, arrow function, for-of loop은 기본적으로 알고 있는 상태에서 리액트에 접근해야 한다.
  • JSX 자바스크립트 확장 문법이고, JSX 코드가  Babel를 통해 JS 문법으로 변환해준다.
    • 1. 반드시 하나의 앨라먼트로 감싸야한다.
    • 2. JSX 안에서 JS 문법 사용 시 {} 이용해야 한다.
    • 3. JSX 내부에선 if문을 사용할 수 없다. 대신, IIFE or 삼항 연산자 사용한다.
    • 4. 엘리먼트 클래스 이름을 적용할 때, className을 사용한다.
  • 복잡도 감소, 가독성 증가

 

 

Must know concepts

다음 질문에 답변할 수 있어야 합니다. 

• JSX 문법을 도입하게 된 이유가 무엇일까요? 어떤 장점이 있나요?

  • DOM 조작을 직관적 및 가독성 있게 짤 수 있다
  • 재사용성이 증가(component)한다.
  • 선언적(declarative)인 것이 가장 큰 장점이다.

    • 선언적인 것에 대해 이해할 수 있다.

      Declarative Programming & React

    • 보충 자료(low level의 의미) : High- and low-level

      • lower level details of the system.

      • Here we are defining we need every Employees detail not how to get the Employees.

 

• JSX를 사용하지 않고 React를 사용할 수도 있나요? (advanced)

  JSX 없이 사용하는 React - React

 

• JSX에 JavaScript 표현식을 쓰려면 어떤 방법으로 써야 하나요?

  • JS 표현식( ex. 변수, 2 + 2, user.firstName, formatName(user)) 후 중괄호로 감싸 JSX 안에 사용할 수 있다.

 

• import / export 구문은 어떤 식으로 사용할 수 있나요?

import React from "react"; 
import ReactDOM from "react-dom"; 
export default App;

 

 

 

---

 

 

(soon)

React 주요 개념과 사용법

• 함수 컴포넌트와 클래스 컴포넌트를 만드는 방법과 차이를 이해할 수 있다.
• props의 특징과 규칙을 이해할 수 있다.
• props와 state와의 차이점을 이해할 수 있다.
• 상태 변경 방법과, 그 이유를 이해할 수 있다.
• 이벤트를 처리할 수 있다.
• lifecycle을 통해 작동 원리를 이해할 수 있다.
• React 컴포넌트 간 데이터 흐름 및 상호작용의 원리를 이해할 수 있다.
• 비동기 호출과 같은 side effect를 React 컴포넌트 내에서 처리할 수 있다.

API 문서 연습

• React 공식 문서를 활용할 수 있다.
• YouTube API 문서를 활용할 수 있다.

React를 구성하는 JavaScript 생태계

• Create React App을 구성하고 있는 babel 및 webpack의 목적과 필요성을 이해할 수 있다.