Dev-dotoli TIL

inno 17



Sparta coding



Innovation Camp


w3 day17



ios - 시장전망?
TIL - YIL lol

2-2 LifeCycle

conponent / class, function형 class ㄴㄴ

  • 예전에 자주 쓰였기 때문에 필드에 나가서 일을 하려면 class형을 읽고, 수정할 수 있을 정도로 배워두는 것 의미있음

생성 : 눈에보임 수정 : 4가지경우 component 변함 삭제 : 눈에보이는곳에서 빠짐

component Did Mount

  • 가상DOM이 실제 DOM에 올라간 후에 실행됨
    • 때문에 AJAX, addEventListner등의 작업 여기서하는편

stat -component자체의 data setstat - 내 data 바꾸기

Did Update

  • rerandering이 끝난 다음에 실행되는
  • prevProps : 이전 부모에게 받아온
  • prevState : 이전에 내가 가진
  • Did Update도 가상DOM이 실제DOM에 올라간뒤
    • DOM관련처리 해도 되는 곳

render : 나 바뀔꺼야

  • 뭘로? : return안에 바뀔내용이 들어가있음
  • 올라가고나면 DidUpdate실행됨
  • WillUnmount실행으로 제거

2-3 Component

  • component를 잘 써먹으려면 잘 쪼개야함
  • 여러번 여러방법으로 쪼개면서 익숙해지자
  • WEBsite에 들어가면 쪼개기 각 확인

state / props

  • state : component가(내가) 가지고있는 data
    • 다른 component로 부터 받아 올 일이 없는 것들
    • 내가 가진data : 수정/생성 자유로움
  • props : 부모로부터 받아온 정보
    • 받아온 data는 바꿀 수 없다

2-4 Component

Code Convention (코딩 국룰)

  • folder 소문자
  • file 대문자 CamelCase

함수형

  • import 객체 from 패키지? 여기 이해 잘안됨
  • 함수형으로 선언 : JS와 같음
    • ruturn ( react element);
  • 다른파일에서도 이 component를 쓸 수 있게 export default … ;

새로운 JS파일에 작성한 이 component를 바로확인?

  • No, 구동중인 app.js에서 불러와야함
  • import c(omponetnt name) from ‘./filename’

export 다른방법

  • export {componentName}
  • import {componentName} from ‘./fileName’

2-5 component

class형 component

  • class App extends React.Component {}

    • extends 뒤에 부모compo?

  • class형에는 초기화해줄 초기화함수

    • constructor(props) { }
    import React from "react";

const BucketList = (props) => {
  // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트)를 반환
  console.log(props);
  return <div>버킷 리스트</div>;
};

export default BucketList;

2-6 Q1

  • BucketList

  • dictionary형의 {list : 어떤 값은 받아온 것}
  • { list }
  • props를 인자로 받고 props.list 위 방법과 같은결과

어떻게 state, props를 가져오는지 배움(모르겠음)

ex) yarn start node runtime?이 실행됨

2-7 React에서 CSS

  • inline style 말고 .css file로분리해서 적용해보자
  • h1 tag 에 달린 여백이 부모요소에고 영향을 줌
  • 여백상쇄, 마진 병합 상쇄 현상

  • 부모요소를 block이 아니게 처리해서 해결?

  • 각 영역의 height, width를 설정한 후에
  • height:vh / width:vw %로 넓이 설정가능
  • 안쪽영역에 margin : auto를 주면 가운데로 정렬
  • 바깥영역의 display : flex로 설정하면 세로도 정렬
    • display:flex로 바깥을 설정하면
      안쪽이 가지고있는 item만큼 최대한 넓이를 줄여버림
  • <hr /> 밑줄 (도 지정해서 style가능)
    • 밑줄에 마진을 줄때 상하만 두고 좌우를 0으로하면
      다른 item과 여백이 같아짐
    • margin: 16px 0px; = 상하16 좌우0

  • BucketList에 className주고

    • padding, margin, background-color
  • color tip
  • slate…
  • alice…

2-8 styled-components

  • react protject에 package를 설치해보자
  • package.json : 안에 package history 기록
  • styled-components 장점
    • naming 쉬움
    • coponent아래 style이 바로 들어가서 직관적
  • ``백틱 안에 ${ JS문법 }
  • 삼항연산자도 가능
  • SCSS문법 가능

  • nesting 기법 (중복부분을 내부에 연장해서씀)

  • 좋은건 알겠는데 진짜 개쓰기 싫다
  • 일단 기본 CSS사용법부터 잘 익히자

2-9 styled-components Quiz

  • skip

2-10 How to BucketList contents add

  • getElementBy / appendChild ?
  • nope DOM요소 ㄴㄴ react요소 어떻게?
  • Ref를 써서 가져올 수 있음

  • Ref는 이름표

  • 함수형에서 쓰는법

  • react hook

  • 나는 react DOM 요소를 아직 이해못하고있는듯

으 돌겠다

  • 오늘 목표 : github repo 만들고
  • local react project랑 연결 : 완

OS - study / 담당 정해서 회고

  • nvm 명령 오류 not found : nvm
  • yarn으로 cra구동해보기

정주혜 기술매니저님
yutube가 강의보다 이해가 잘 될 수 도 있다
이해안되는것을 가져다 쓸 때?
처음은 그렇게 시작해도 된다
언젠가 안될때가 생기면
찾아보고
해결하고
내 것이 되고