TIL. React. 리액트 심화주차. <22.04.01>

오늘 해야 할 것

• 리액트 심화반 강의 독파 (V)
• CS스터디 책 읽기 (V)

오늘 배운 것

자바스크립트 개념 다시 잡기

var = 변수. ES2~5. 재할당. 선언 밑에 해도 위에 가능. 선언하자마자 초기화(initialize-메모리에)

let= 변수. ES6. 블록. 재할당X. 호이스팅해도 초기화 못해서 실행 못함(선언을 밑에 하면)

심볼형 let cat =Symbol("cat") identify 할 수 있다. 라벨

{key : value} : 프로퍼티. key는 문자형

리터럴: 데이터 값 바로 주는 것.

함수 표현식: 초기화 바로 되지 않음

생성자 함수 new Function : let a = new function("문자열") 권장 안함.

내부 > 외부 우선순위 (변수)

프로토타입

패턴

복사 객체 / 원래 있던 곳

원본(부모)객체와의 연결을 가지고 있음: prototype-link: proto

프로토타입 체인: 자식->부모->객체

저렴하게 쓰기 위해 프로토타입을 쓴다(?)

(공부를 더 해야 할 것 같습니다.)

컴포넌트 쪼개기

오늘은 component를 쪼갤 때 어떻게하면 잘 쪼개는가에 대한 첫 강의를 들었습니다. 강의에서는 피그마에 올라온 와이어프레임을 쪼개보라고 하여 스스로 쪼개보았습니다.

로그인 페이지와 회원가입 페이지에서는 크게 3분류로 쪼갰습니다. 위의 유저정보라 볼 수 있는 헤더부분과, 로그인 페이지의 인풋, 그리고 로그인하기 버튼으로 쪼갰습니다.
회원가입 페이지도 이와 유사합니다.

게시글 페이지와 게시글 작성 페이지에서는 헤더, 큰사진, 댓글, 게시글 작성에서의 인풋과 이미지 입력 그리고 상태창과 게시글 추가 버튼으로 나눴습니다.

하지만 강의를 들어보니 큰 틀을 먼저 잡았습니다. compoenets, elements, pages, shared라는 폴더를 만들고 그 안에 컴포넌트들을 분류별로 쪼개 넣었습니다.

props 같은 조건 적당하게 갯수를 사용하여야 합니다. 컴포넌트는 커도 작아도 쓰기 힘듭니다.

grid를 잡는 것은 여백을 미리 지정하는 것입니다.

box-sizing: 넓이를 padding에 포함합니다(?)

오늘 공부 한 것

리액트에서 Fragments란?

Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화 할 수 있습니다. 그냥 <></>와 같습니다. 하지만 key는 Fragments에서만 쓸 수 있습니다. (어트리뷰트) 이는 map을 쓸 때 id값을 넣어야 할 때 필요합니다.

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // React는 `key`가 없으면 key warning을 발생합니다.
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

오늘의 키워드

• 컴포넌트 쪼개기 : 숲에서 나무로 or 나무에서 숲으로

• 싱글 쓰레드 : 일꾼 하나

• await : 일꾼이 기다림

• 프로토타입 체인 : 자식 -> 부모 -> 객체