TIL 23/06/12

NEW

• SPA는 SEO에 약하다.
  서버로부터 페이지를 한개만 받고 그 다음부터는 동적으로 계속해서 그려지기 때문에 찾기가 어렵다. Search 할 수가 없다.
  왜? index.html 파일 한개만 갖고 있기 때문에!

• 리액트 컴포넌트 굉장히 중요하다.
  함수형 & 클래스형 컴포넌트. 함수형 주로 쓸 것이다. 인풋이 들어가면 아웃풋이 나오는 형태.
  함수형 컴포넌트로 리액트 컴포넌트를 만들 것이다.
  공식 홈페이지에서도 권장. 훨씬 쉽다.
  즉, 리액터 세계에서 말하는 컴포넌트는 함수다. html을 리턴하는 것처럼 함수를 만들면 된다.

• JSX 문법 : Javascript와 XML(html이라고 봐도 됨)의 합성어. 작스~

• 반복되는 것들이 생기면 컴포넌트 분리 필요하다.

• App.js 에서 최상위태그는 반드시 1개여야한다.

• props는 데이터를 교환하는 방식, 데이터를 주는 방식이다.
  부모컴포넌트가 자식컴포넌트에게 물려준 데이터
  반드시 위에서 아래방향으로 흐른다. 부모 -> 자식으로만 흐른다.
  반드시 읽기전용으로 취급하며 변경하지 않는다.

• defaultProps : 부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기값

• 보일러 플레이트

• return문에 JSX 문법이 들어가는 것들은 컴포넌트이기 때문에 JSX 확장자로 두는 것이 조금 더 정확하다.
  js 확장자와 jsx 확장자는 다르지 않다. 하지만 협업할 때 명확하게 표기하기 위해.

• 리액트 안에서 변경되어야 하는 값은 반드시 state로 선언된다.

---

import React from "react";

// props를 통해 부모 -> 자식 데이터가 전달됐다.
function Son(props) {
  console.log("props", props);
  return <div>나는 {props.motherName}의 아들이에요!</div>;
}

// 부모 -> 자식 정보를 전달했다!
function Mother() {
  const name = '흥부인';
  return <Son motherName={name}/>;
}

function GrandFather() {
  return <Mother />;
}

function App() {
  return <GrandFather />;
}

export default App;

• prop drilling

• children 받는 방법
  1) <div 옆에 받기 />
  2) <태그>가운데 받기</태그>

import React, { useState } from "react";
import "./App.css";

function App() {
  const [id, setId] = useState("");
  const [password, setPassword] = useState("");

  function logIn() {
    alert(
      "고객님이 입력하신 아이디는" +
        id +
        "이며, 비밀번호는" +
        password +
        "입니다."
    );
    setId("");
    setPassword("");
  }

  return (
    <div>
      아이디 :{" "}
      <input
        type="text"
        value={id}
        onChange={function (event) {
          setId(event.target.value);
        }}
      />
      <br />
      비밀번호 :{" "}
      <input
        type="password"
        value={password}
        onChange={function (event) {
          setPassword(event.target.value);
        }}
      />
      <br />
      <button onClick={logIn}>로그인</button>
    </div>
  );
}

export default App;

---

ERROR

Something is already running on port 3000.

yarn start 했는데 3000 포트가 사용중이라는 에러가 떴다.

netstat -ano 명령어로 사용중인 포트를 조회해서 PID 확인 후 작업관리자에서 PID 검색으로 사용중인 프로그램을 봤더니 Node.js 였다. 나도 node로 써야하니까 그냥 작업을 끝내버리고 다시 yarn start 했더니 정상작동 되었다.

---

리액트도 화이팅!