React👨‍💻

프론트엔드 기술에서 빠질 수 없는 기술 React 를 익히는 첫 날이다!
React는 Javascript 사용자 인터페이스 (UI) 라이브러리 라고 보면 된다. 프레임워크와 착각 할 수 있지만 엄연히 다르다.

프레임워크는 다른사람들이 만들어둔 틀 안에서 작업을 하는것
ex) Vue,Angular

라이브러리는 내 작업에 다른사람이 만들어둔 코드를 가져와 사용하는것
ex)React

라이브러리인 React는 기술적인 기능을 추가하기 위해 third-party를 설치하고
React-Router 등 여러 기술을 사용 할 수 있다.

---

Node & NPM

Node.js

Node.js는 자바스크립트가 브라우저 환경 밖(ex:서버)에서도 작업 할 수 있는 환경이다. 프로젝트를 개발하는 데 필요한 주요 도구들(ex. 바벨, 웹팩)이 Node.js 기반이기 때문에 반드시 설치해야 한다❗️

설치 확인 방법 
node -v 

NPM

Node 기반의 패키지를 사용하려면 npm(node package manager)이라는 패키지 도구가 필요하다.

설치 확인 방법 
npm -v 

CRA (Create React App)👨‍💻

리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구

CRA 설치
npx create-react-app .

. 은 현재경로

---

Component

Component : 재활용 가능한 UI 구성단위

Component 특징
1. 재사용에 용이하다
2. 코드 유지보수에 용이하다.
3. 페이지 구성이 어떻게 되어있는지 확인하기 쉽다.
4. 컴포넌트 안에 컴포넌트를 추가 할 수 있다. (부모 컴포넌트 / 자식 컴포넌트)
5. 함수형 컴포넌트 / 클래스형 컴포넌트 2가지가 있다.

1️⃣ 함수형 컴포넌트 (function)

컴포넌트 선언 방법 중 하나인 함수형 컴포넌트는 클래스형 선언 방식보다 쉽고 간결하다! hook 기능이 추가되어서 이전보다 state가 사용 가능하게 되어 현업에서 많이 쓰인다!

import React from 'react'

function Main() {
  return (
    <>
      <Navigation />
      <div className="main">
        <FeedsContainer />
        <RecommendContainer />
      </div>
    </>
  );
}

2️⃣ 클래스형 컴포넌트 (Class)

클래스형 컴포넌트는 render함수를 필수적으로 사용해야 하고 JSX를 반환한다.

import React from 'react'

class Component extends React.Component {
  render() {
    return (
    <div>
    	<h1>This is Class Component!</h1>
    </div>
    )
  }
}
export default Component

---

JSX

JavaScript Syntax Extension
JSX란 리액트에서 사용하는 자바스크립트 확장문법입니다.
JSX로 작성한 코드는 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.

1️⃣ JSX 장점

1. HTML 태그를 그대로 사용하기 때문에 보기쉽다.
2. HTML 태그를 사용하면서 JavaScript도 사용가능하다.

2️⃣JSX 특징

1.class --> className 으로 변경해야한다.

2.Self Closing tag : 기존의 <p></p> 태그처럼 닫아주는 태그없이 <p />로 가능하다.

3. 모든 요소를 감싸는 최상위 요소필요 (React Fragments: <>..</>) : 내부요소를 감싸는 최상위 요소가 필요하다. Fragments로 불필요한 <div>태그는 사용 하지 않아도 된다.

4. inline Styling : <div style ={{color : "red"}}Hello React</div>

5. 자바스크립트 표현 : { ... javascript ... }