Achievement Goals

• React의 특징

  1. 선언형이다
  2. Facebook에서 개발하여 유지보수가 계속해서 이뤄지고 있으며 범용성이 넓다!
  3. 컴포넌트 기반이다.
  4. JSX !
  5. Virtual DOM

• JSX

  JavaScript XML의 줄임말이며 UI를 구성할 때 사용하는 문법으로 JavaScipt를 확장한 문법이다. (React에서 JSX를 안쓰면 시체! React에서 사용하는 (html과 Js를 함께 쓰는)언어라고 생각하면 된다. )
  JSX는 브라우저가 바로실행할 수 있는 코드가 아니여서 브라우저가 이해할 수 있는 JavaScript 코드로 변환시켜주어야한다. 이 역할을 하는 것이 "Babel'이다. Babel은 JSX를 브라우저가 이해할 수 있는 Javascript 코드로 컴파일한다. 이 파일을 브라우저가 읽고 해석하여 화면에 렌더링한다.
  JSX 없이 React요소를 만들 수 도 있지만 코드가 복잡하고 가독성이 떨어지므로 JSX를 꼭 사용할 것. 더 편한 도구를 냅두고 맨손으로 코드를 짤 필요는 없다.

• Virtual DOM

  리액트 에서는 HTML,CSS,JavaScript 세가지를 모두 사용하는 DOM과는 다르게 CSS와 JSX 문법만을 가지고 어플리케이션을 개발한다! 완전 편리하다.. HTML와 JavaScript 를 JSX로한번에 묶어서 사용한다.

• React 컴포넌트(React Component)

  JS문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있게 코드를 작성하고,
  구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트 라고 한다.

• npx create-react-app

  npx create-react-app 파일명 으로 새로운 리액트 프로젝트를 시작할 수 있다.

• 리액트, JSX 기본 문법

  1. 조건식은 무조건 삼항연산자 사용
  2. function Hello {} 에서 엘리먼트는 대문자로 시작!(소문자로 시작하면 HTML엘리먼트로 인식)
  3. JS문법을 사용할땐 중괄호로 묶어주기
  4. 엘리먼트 class는 항상 className 으로 표기
  5. 하나의 엘리먼트안에 모든 엘리먼트 포함하기. 최상위 엘리먼트는 항상 하나여야만 한다. 아니면 [] 배열안에 모든 엘리먼트를 넣어도 된다.
  6. 여러개의 HTML 엘리먼트를 표시해야한다면 map함수로 뿌려주기
  7. map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야한다.
  8. key는 가능하면 데이터의 ID를 사용하고, 만약 불변하고,예상가능하며,유일한 ID가 없다면 부득이하게 항목의 인덱스를 key로 사용해야한다. key는 필 수 값 !

• 리액트, JSX로 트위틀러를 하드 코딩할 수 있다.

  O, 하드 코딩뿐만 아니라 map을 이용해서 직접 데이터를 뿌려줄 수도 있다.

• 컴포넌트를 먼저 개발하는 Bottom-up 개발 방식에 익숙해진다.

  O

• npm script로 리액트 개발에 필요한 기본적인 툴을 사용할 수 있다.

  O

오늘의 주어진 과제였던 리액트로 트위틀러 인트로 만들기

주어진 과제를 거의 한시간만에 끝마치고나서 어드밴스드를 시작했는데.. 도무지 갈피도 안잡히고 뭐부터 시작해야 할지도 몰라서 남은 시간동안 엄청 고민만 했었다.. 나중에서야 레퍼런스 코드를 봤는데 보자마자 '아! 내가 손도 못 댄 이유가 있었구나'하고 납득이 되었다. 월요일에 state와 props에 대해 배우게 되는데 월요일 수업이 끝나고 어드밴스드도 다시 해봐야겠다.