우아한 테크러닝 DAY 3

redux는 publishing, subscribe이고 react와 전혀 다른 라이브러리
redux의 middleware도 필요하다 사실..
*사용자에 머물지 말고 직접 구현해보자!*
왜 그 라이브러리가 나왔고, 어떻게 쓰면 더 나은 방법이 될지 생각해보도록,, 소비자로 남지 말자,, 이때는 초기 릴리즈 가서 하나하나 까보며,,

React

https://pomb.us/build-your-own-react/
다루기 쉬운 구조를 만들자. 다루기 쉬운 구조는 받아서 쓰기도 쉽고 복잡한 구조와 연결되기도 쉽다.
브라우저의 태그처럼 문자열과 같은 형태를 js로 변환하도록 하는 다루기 쉬운 dom tree 이게 다루기 쉬운 구조
리액트 : DOM <-> VDOM <-JSX(마크업처럼 편리한)-> JS
정리하면 React는 DOM을 다루기 쉬운 객체로 변환해서 사용하는 것이다 (VDOM)
vdom을 만들고 render되면서 real dom이 생기는 순서!

‘어떤 것이 좋은 아키텍처인가’가를 생각
같은 것끼리 묶고 다른 건 분리하자
어떤게 같고 어떤게 다른 것인가
이름만 잘 지어도 70%는!!

const list = [
  { title: "react에 대해 알아보자" },
  { title: "redux에 대해 알아보자" },
  { title: "typeScript에 대해 알아보자" }
];

const rootElement = document.getElementById("root");

function app() {
  rootElement.innerHTML = `
  <ul>
    ${list.map((item) => `<li>${item.title}</li>`).join("")}
  </ul>
    `;
} //어떠한 데이터를 어떠한 모양으로 어디에 꽂아넣는 것

app();

위의 코드를 순수 함수로 변화

function app(items) {
  rootElement.innerHTML = `
  <ul>
    ${items.map((item) => `<li>${item.title}</li>`).join("")}
  </ul>
    `;
}

app(list);

그냥 react~~!!

import React from "react";
import ReactDom from "react-dom";

const vdom = {
  type: "ul",
  props: {}, //객체
  children: [
    { type: "li", props: { className: "item" }, children: "React" },
    { type: "li", props: { className: "item" }, children: "Redux" },
    { type: "li", props: { className: "item" }, children: "TS" }
  ] //자식
};

function createElement(type, props = {}, ...children) {
  return { type, props, children };
}

function StudyList(props) {
  //이름만 봐서도 무슨 일인지 알기 쉬워진다는건 큰 장점
  //React.createElement('ul', {}, [React.createElement('li')])//type, props, children 전달함
  //render에서 realdom으로 converting 할 것
  return (
    <div>
      <ul>
        <li className="item">React</li>
        <li className="item">Redux</li>
        <li className="item">TS</li>
      </ul>
    </div> //이게 다 컴포넌튼데 보다 쉽게 태그로 만들게
  ); //바벨로 검사해보면 사실은 함수 호출!
}
function App() {
  //const vdom = createElement('ul', {}, createElement('li', {}, 'React'));

  return (
    <div>
      <h1>HELLO</h1>
      <StudyList item="abcd" label="haha" />
    </div> //이게 다 컴포넌튼데 보다 쉽게 태그로 만들게
  ); //바벨로 검사해보면 사실은 함수 호출!
}

ReactDom.render(<App />, document.getElementById("root"));
//jsx라 컴포넌트 태그 ^

내가 만든 리액트~!!

/* @jsx createElement */
//^실제 바벨이 하는 일

function renderElement(node) {
  if (typeof node === "string") {
    return document.createTextNode(node);
  }
  const el = document.createElement(node.type);
  node.children.map(renderElement).array.forEach((element) => {
    el.appendChild(element);
  }); //노드에 자식 있으면 배열로 만들어 리턴하는 거 중 element 받아서
  return el;
}

function render(vdom, container) {
  container.appendChild(renderElement(vdom)); //객체를 넘겨주면 리턴한건 realdom
}

function createElement(type, props = {}, ...children) {
  if (typeof type === "function") {
    return type.apply(null, [props, ...children]);
  }
  return { type, props, children };
}

function Row(props) {
  return <li>{props.label}</li>;
}

function StudyList(props) {
  //이름만 봐서도 무슨 일인지 알기 쉬워진다는건 큰 장점
  //React.createElement('ul', {}, [React.createElement('li')])//type, props, children 전달함
  //render에서 realdom으로 converting 할 것
  return (
    <div>
      <ul>
        <Row label="하하하" />
        <li className="item">React</li>
        <li className="item">Redux</li>
        <li className="item">TS</li>
      </ul>
    </div> //이게 다 컴포넌튼데 보다 쉽게 태그로 만들게
  ); //바벨로 검사해보면 사실은 함수 호출!
}
function App() {
  //const vdom = createElement('ul', {}, createElement('li', {}, 'React'));

  return (
    <div>
      <h1>HELLO</h1>
      <StudyList item="abcd" label="haha" />
    </div> //이게 다 컴포넌튼데 보다 쉽게 태그로 만들게
  ); //바벨로 검사해보면 사실은 함수 호출!
}

render(<App />, document.getElementById("root"));
console.log(<App />);
//대문자로 시작된 경우는 parameter type이 string이 안가고
//컴포넌트 function이 간다

//ReactDom.render(<App />, document.getElementById("root"));
//jsx라 컴포넌트 태그 ^

어떻게 react로 만들었을 때 클릭클릭 하면 상태가 ++ 되는가???
함수형 컴포넌트는 변수를 가질 수 없다 (항상 새롭게 초기화 되므로)
hook은 함수형 컴포넌트에서 가질 수 있는 상태
react가 컴포넌트 만들때 createElement(vdom 만듬)
node가 함수면 호출해서 vdom 구성
hook 계열의 함수(use~~)를 호출하면 그걸 알고 hook 전역 배열에 넣음
두번째 호출부터는 배열에 있던 값을 돌려줌
그래서 당연히 component 안에서만 호출되는 것

• hook은 함수형 컴포넌트에서도 class형 컴포넌트처럼 상태 관리 및 다양한 기능을 할 수 있게 제공해주는 api
• redux는 상태 관리 라이브러리의 한 종류 (mobx와 같은)

import React from 'react';
import ReactDom from 'react-dom';

class Hello extends React.Component {
  constructor(props){
    super(props);

    this.state = {  //생성자 안에서 초기화 되거나
      count: 1
    }
  }
//component의 life cycle 
  componentDidMount(){
    this.setState({count: this.state.count + 1})
  }
  render(){
    return <p>안녕!</p>
  }
}

function App(){
  const [counter, setCounter] = useState(1); //배열로 리턴

  let x = 10; //생성될 때 초기화 하거나

  return(//root 요소가 있어야 함 (fragment를 이용해 루트 여러개 하는 건 fake)
    <div> 
      <h1 onClick={ () => setCounter(counter+1) }>상태{ counter }</h1>
      <Hello />
    </div>
  )
}

ReactDom.render(<App />, document.getElementById("root"));

너 무 어 렵 다 . . .