자바스크립트 → 리액트

1

1. 사용자 인터페이스 렌더링사용자가 웹 페이지를 방문하면 서버는 다음과 같은 HTML 파일을 브라우저에 반환한다. 그 후에 브라우저는 HTML을 DOM(문서 개체 모델)으로 구성한다
2.  DOM이란?
   1. DOM은 HTML요소의 객체 표현
   2. 부모와 자식관계가 있는 트리 구조
   3. 사용자 이벤트를 수신하고 사용자 인터페이스에서 특정 요소를 선택, 추가, 업데이트, 삭제하여 DOM을 조작
   4. 스타일과 내용도 변경 가능

 

2

1. Javascript 및 DOM 메서드로 UI 업데이트
   1. 명령형 vs 선언형 프로그래밍
      1. 명령형: 단계적으로 접근("어떤 방법으로" 컴퓨터 화면에 페이지를 나타내야 하는지를 묘사)
      2. 선언형: 단계를 고려하지 않고 선언적으로 접근("무엇"이 나타나야하는지를 묘사)
         1. 속도를 높일 수 있어서 선호함
         2. 선언적 라이브러리 → 리액트

3

1. 리액트 시작하기
   1. react는 핵심 React 라이브러리
   2. react-dom은 DOM과 함께 React를 사용할 수 있도록 하는 DOM관련 메서드 제공

JSX란?

1. 친숙한 HTML과 유사한 구문으로 UI를 설명할 수 있는 Javascript용 구문 확장
2. 세가지의 JSX규칙
   1. React fragment <></>
   2. Close all the tags
   3. camelCase most of things
3. Babel: jsx를 javascript로 변환하는 컴파일러

명령형

<script type="text/javascript"> 
    const app = document.getElementById('app'); 
    const header = document.createElement('h1'); 
    const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀'); 
    header.appendChild(headerContent); 
    app.appendChild(header); 
</script>

선언형

<script type="text/jsx"> 
    const app = document.getElementById("app") 
    ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app) 
</script>

 

4

1. React를 위한 필수 자바스크립트
   1. Function and Arrow Function
   2. Objects
   3. Arrays and Array methods
   4. Destructuring
   5. Template Operators
   6. ES Modules and Import / Export Syntax

 

5

1. React 핵심 개념
   1. Components
      1. 재사용이 가능한 코드 모듈
      2. 나머지 부분을 건드리지 않고 구성요소를 쉽게 추가, 업데이트 및 삭제할 수 있기 때문에 코드가 성장함에 따라 유지관리가 쉬움
          Components 만들기
      1. UI 요소를 반환하는 함수
      2. 일반 HTML 및 Javascript와 구별하기 위해 대문자로 표시
      3. <> 사용
          Components 중첩
      1. React 구성 요소(Components)를 계속 중첩하여 구성 요소 트리를 형성
      2. 이 모듈 형식을 사용하면 앱 내부의 다른 위치에서 구성요소를 재사용할 수 있다
   2. Props(read-only)
      1. 정보 조각들을 React components에 속성으로 전달할 수 있다
      2. components의 동작을 변경하거나 화면에 렌더링될 때 시각적으로 표시되는 항목을 변경하는 사용자 지정 props를 허용하는 구성요소를 디자인 → 이러한 props를 상위 구성 요소에서 하위 구성 요소로 전달
      3. 객체이기 때문에 object destructuring를 사용하여 함수의 매개변수 내에서 props 값의 이름을 명시적으로 지정할 수 있음
   3. State (can be asynchronous)
      1. Listening to Events
         1. onClick, onChange, onSubmit …
      2. Handling Events
         1. handleClick
      3. State and Hooks
         1. useState 를 호출할 때 이 구성요소가 무언가를 기억하기를 원한다고 React에 알려줌
         2. React가 렌더링되는 동안에만 사용할 수 있는 특수 기능