Dev-dotoli TIL

inno 16



Sparta coding



Innovation Camp


w3 day16



타입스크립트 스터디 김진욱님

운영체제 스터디 배상훈님
spring 기술매니저
cs기술면접 - 야놀자 변태처럼
구동프로세스 어떤식으로 진행이되나
꼭 변태처럼하는곳 아니어도 기술면접
process - thread 차이
30분-1시간
전공자는 이미 다 아는것들
강의 한시간미만
하루에 하나-두개씩
저녁전 30분
다음날 5시쯤 내용공유 - 중요체크
저녁에 알고리즘스터디

공부하는 시간을 정하고
하루 기준 정한 시간만큼씩 투자

react 1

component
화면을 구성하는 단위
function App() {
  return <div></div>;
}

html을 return하는 함수를 단위로 쓴다

react의 구성

import(필요한파일 가져오기)

component
( JS코드를 작성할 수 있는 부분이있음 <br>
 실행시킬명령 - 함수 -  <br>
 return을 기준으로 아랫부분에 HTML(JSX)

export default(component 내보내기)
  • component는 반드시 첫 대문자
  • folder는 소문자

component 안에 component넣기

  • App > Child

  • 화면에 보여지다 Rendering

JSX
html tag는 .js파일안에서 사용불가 JS안에서 html같은 마크업을 넣어 뷰(UI)작업을 편하게 할 수 있게 함

const start__half = (
  <div>
    <h1>hi</h1>
    <p>시작이 반</p>
  </div>
);

  • react에는 단 하나의 html file존재
    (public의 index.html)

  • JSX 문법으로 React요소를 만들고
    DOM에 rendering해서 뷰를 그린다(?)

  • component에서 반환하는 element는 한개

  • class 대신 className

    <div className="App">

  • 인라인으로 style 주기

    // 중괄호를 두 번 / 딕셔너리도 자바스크립트
<p style=>orange</p>;

//or 스타일 딕셔너리를 변수로 만들고 쓰기
function App() {
  const styles = {
    color: "orange",
    fontSize: "20px",
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}
  • react project 폴더에서 yarn start (구동)
  • localhost:3000 에서 확인

Props?

  • 부모 component로 부터 받아온 data
  • Mother의 name -> Child에게 전달
  • props로 name을 전달함
  • 받은 props를 Child에서 console로찍어봄
  • 함수(컴포넌트)의 인자로 props넣음?

  • 자식->부모에게로 props 전달불가

  • JSX에서 { }안에 JS문법사용

children

  • <Component props={props} />와 다른방식

    import React from "react";

function User(props) {
  return <div>{props.children}</div>;
}

function App() {
  return <User>안녕하세요</User>;
}
export default App;

children 용도

  • layout component를 만들 때 자주 사용

  • layout 안에 header, 그아래 {pops.children}을통해 props를 받아서 rendering

    // src/About.js

import React from "react";
import Layout from "./components/Layout";

function App() {
  return (
    <Layout>
      <div>여긴 App의 컨텐츠가 들어갑니다.</div>
    </Layout>
  );
}
export default App;

react 학습자료 개판인 듯

html DOM 1-4 Document object model

  • html 단위 하나하나를 객체로 생각하는 모델
  • 상위->하위 부모->자식 tree구조
  • document.body
  • document.body.child~
  • document.body.children9
  • document.getElementByTagName(“div”)

JSX 1-10

react 1-12

  • node
  • node version maneger nvm
  • node pakage maneger npm
  • yarn
  • create react app cra

react 가상DOM

  • 가상으로 DOM을 그리고 바뀐부분만 적용 - 연산이 줄어듦
  • 처음 page에 진입 > DOM을그림
  • data가 변했을때 마지막에 DOM을그림
  • site구조에 따라 가상돔이 느릴수도있음

Life cycle1

  • 생성: mount(얹혀지는) componentDid-Mount

  • update
  • new props : 부모가자식에게 주는 data 바뀌면
  • setState : 내가 가진 정보가 바뀌면
  • rerandering : 부모가 rerandering되면
  • forceupdate : 강제로
  • 제거: unmount(덜어내는) componentWill-Unmount

Life cycle2

  • class / function component
  • class이제 안씀 - 다만 기존 코드를 이해. 수정할정도