React

= Js Logic + JSX(=Dom)

JSX(Javascript Syntax Extension)

html -> JSX 로 변환
1. input 태그를 / 로 닫기
2. class를 className으로 바꾸기
3. style은 맵핑(json 타입이라는 걸 알게 하기 위해서 매핑을 하는 것)

매핑은 key를 Json타입으로 바꿔달라는 것

const formStyle = {
    border: "1px solid #ccc"
} 
// 이 부분이 다 들어가기 때문에 inline선언 방식 때 curly braces가 2개가 되는 것이다.

<form style={formStyle}>
<form style={{border: "1px solid #ccc"}}>

React의 특징

1. Build encapsulated components

2. Component logic is written in JavaScript instead of templates
   - 데이터를 빠르게 전송 가능

   JavaScript = 객체기반
   React = JavaScript Library
   React = 객체기반

   React Component를 보면 Json 형태라는 것을 확인 가능

// App.js 

const App = () => (  // 함수형 프로그래밍(functional programming) 

/* 
return({key:value})
다음과 같이 key : value형태여야 하는데 key가 의미가 없기 때문에 생략
*/
     <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
 )

 export defalut App

// jsx
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

// 컴파일되기 전 
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

Higher-Orderd Component

조금 더 이해하고 정리하기

Closer

로직을 리턴하면 클로저
inner에 있는 것
함수를 리턴fx -> fx

SPA(Single Page Application)

이전 내용을 쓸어내리고 새로 페이지를 올리는 것이다.
Route를 통해 페이지 변경이 가능하다.

Functional Programming

FP의 특징

• Pure Function : Valina Js
• First-Class Function :  1급객체
  - 변수나 데이터 구조 안에 함수를 담을 수 있다(함수 안에 함수를 리턴)
• Immutable Data
  - 명령형이(for, if) 아닌 선언적 방식으로 구현

FP 조건

• pure function
• High order  고차함수 = 부모함수
• lamda
  EJB = 지향해야함
  params = T
  return = R

함수도 객체 = 함수가 props를 가진다.
함수에는 일반 객체(Json)와 달리 함수만의 표준 프로퍼티가 정의(default)되어있다

무상태 프로그래밍

• 상태가 변한다고 해서 속성이 변하지는 않음  => 속성을 const로 선언
• 상태는 객체 세계와 외부 세계간의 소통(i/o)을 위해서만 발생한다.