React intro

🗓️ 오늘 배운 내용

1. React intro 개요
2. jsx
3. Create React App
4. React Twitter Intro

🌖React

React는 사용자 인터페이스를 만들기 위한 Javascript 라이브러리다.
React는 페이스북에 의해 만들어진 오픈소스 프로젝트이다.
React는 빠르고 효율적으로 HTML로 구성된 재사용 가능한 컴포넌트를 만들 수 있다.

➡️ Why React?

1. UI를 이전보다 쉽게 구현할 수 있다.
2. 자바스크립트 문법을 그대로 사용했기 때문에 따로 공부할 문법들이 적다.
3. 많은 사용자를 가지고 있기 때문에 참고할 레퍼런스들이 많다.
4. 컴포넌트 기반으로 개발할 수 있기 때문에 재사용이 용이하게 코드 개발 할 수 있다.
5. 리액트를 배우시면 React-Native 통해 모바일 개발도 할 수 있다.

🔴선언형

코드를 자세히 보지 않아도 직관적으로 이해할 수 있는 언어
JSX(JavaScript XmL)를 활용한 선언형 프로그래밍

🟠컴포넌트 기반

리액트는 하나의 기능 구현을 위해 여러 중요의 코드를 묶어둔 컴포넌트를 기반
컴포넌트 간의 의존성이 적어 독립적이며 재사용과 유지, 보수에 용이하다

###🟢 범용성

리액트는 기존 프로젝트에도 유용하게 적용이 가능하다. 또 Facebook에서 관리하고 있기 때문에 버그가 적고 안정적이다.

🌖 JSX(JavaScript XmL)

JSX는 Javascript가 확장된 문법이다. 하지만, JSX는 브라우저가 바로 실행할 수 있는 Javascript가 아니다. 브라우저가 이해할 수 있는 Javascript로 변환해야 하는데 이 때 필요한 것이 Babel이다. Babel은 JSX를 Javascript로 컴파일한다.

🌎 JSX 주요규칙

• 여러 엘리먼트를 작성하고자 하는 경우 : 최상위에서 opening tag와 closing tag로 감싸야 한다.
• css class 속성을 지정할 때 : className으로 표기한다. 그냥 class만 쓰면 js의 class로 인식한다.
• JSX에서 JS'표현식'을 쓰려면 중괄호{}안에 써줘야한다. {}를 사용하지 않으면 일반 텍스트로 인식한다.
  표현식과 명령문이 무엇인지 몰라서 찾아보았다.
  이 블로그에 설명이 나와있어서 이해하기 편했다.
• React엘리먼트를 정의할 경우, 그 엘리먼트는 대문자로 시작해야한다. 이런 엘리먼트를 통해 작성된 JSX컴포넌트를 사용자 정의 컴포넌트라고 한다.
• 조건부 렌더링은 if문 대신 '삼항연산자'를 써야한다.
• 여러개의 html 엘리먼트를 표시할 때에는 map함수를 사용해야하며, 이때 반드시 key jsx속성을 넣어야한다. key에는 주로 id를 사용한다.
• 최상위에서 opening tag, closing tag 로 감싸주어야 한다.
• React에서 여러개의 HTNL 엘리먼트를 표시할 때 map을 이용해야 한다.

표현식의 유뮤 -> 표현식(값을 변환) -> 값으로 환산할 수 있다.

🌖 create-react-app

Create React App은 리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다.
npx create-react-app@latest 폴더이름
터미널에서 위의 명령어를 통해서 프론트엔드 개발에 필요한 개발 툴을 한번에 다운로드 할 수 있다.

🌈 회고

리액트 드디어 시작...인트로이라서 과제를 스무스하게 진행이 되었다. 에러도 없이 설지나고 나서 리액트의 꽃 난이도가 급상승 하겠지만 설전에 이렇게 맛을 보고 설에는 열심히 리액트 공부하라는 뜻으로 들렸다. 리액트 인트로를 마무리하며...살은 설날에 붙이기로 하자..