>wecode 11 React: Intro

1. Foundation Kick-Off

• Pre-course 돌아보기
• Codekata 설명

2. Codekata with 정원님

오늘 나의 역할은 Navigator

nums: 숫자 배열 ex [1,2,3,4]
target: 두 수를 더해서 나올 수 있는 합계 ex) 3
return: 두 수의 index를 가진 숫자 배열 ex) [0, 1]

navigator 역할을 하고 python으로 실행했는데 javascript로는 왜 안돼!!?

const twoSum = (nums, target) => {
  let result = [];
  for (let i=0; i<nums.length; i++)
    if(nums.includes(target-nums[i])){
      result.push(i);
      result.push(nums.indexOf(target-nums[i]));
    }
    return result;  
  }

3. React Intro by 멘토 신영님 (오후 세션)

React를 사용하는 이유..!!

React란? 사용자 인터페이스(UI)를 만들기 위한 라이브러리.
세대를 거듭하면서 웹이 복잡하고 다양해졌고, 웹을 만들기 위해 DOM에 접근하고 수정하는 과정도 복잡해졌다.

• React를 배우는 이유
  -> 바닐라JS는 하드코딩. DOM에 접근하고 수정하는 과정에 시간이 굉장히 오래 걸린다.
  -> 리액트의 생태계가 활성화 되어 있어 자료가 많고 수요도 많다. 오류 발생 시 빠르게 대처할 수 있다.

• Angular / Vue와 다른 점
  -> MVC Architecture: Model(데이터)+View(UI)+Controller 기능이 많아 프로그램이 무겁다.

CRA

Create React App 리액트를 사용하기 위한 환경을 제공하는 패키지이다.
Node.js 기반의 도구를 사용하기 때문에 Node.js 환경을 만들어 주는 것이 필수!
Node.js와 함께 패키지의 설치와 버전관리를 도와주는 npm이 필요하다.

• node_modules / .gitignore / package.json의 관계
  -> node_modules 폴더에 담고 있는 패키지 파일은 굉장히 무겁기 때문에 초기세팅 시에만 필요하다.
  -> node_modules 폴더는 .gitignore에 추가하고, 그 외 수정사항(이름과 버전)은 package.json에 담아 github로 공유한다.

• index.html / App.js / index.js의 관계
  SPA (Single Page App). html이 하나. index.js에서 DOM을 이용해 HTML로 전달한다. App.js는 JSX를 사용하여 실제 html 내용을 담고 있다.

Component & JSX

Component는 재사용이 가능한 UI 구성 단위이며, 함수형과 Class형이 있다.
Class Component는 반드시 render() 함수를 정의하고 JSX를 반환한다.

• JSX
  javascript의 확장 문법이며, javascript에서 HTML 태그를 사용한다.
  -> class는 className으로 대신하고, 항상 하나의 태그로 감싸져 있다.
  -> 내부가 빈 태그의 경우 Self-Closing Tag를 사용한다. ex) img, input