TIL_221205_ ❗React 입문

정윤숙·2022년 12월 5일

TIL

목록 보기

36/192

React란?
- JavaScript 라이브러리
- batching: 변경 사항들을 한 번에 묶어 실제 DOM에 반영하는 것
Component(= 함수)
- 첫글자는 대문자!
JSX 문법
- 리액트에서는 하나의 html 파일만 존재하기 때문에 JSX문법을 사용해서 React 요소를 만들고 DOM에 렌더링해 뷰를 그린다.
- 컴포넌트에서 반환할 수 있는 Element는 1개
- 클래스 명을 정할 땐 속성값을 className으로 사용
- style줄 땐 json형식!
  -><p style={{color: 'orange', fontSize: '20px'}}>
  -> 'styles' 딕셔너리를 변수로 만들고 쓰기
Props
- 컴포넌트 사이에서 정보를 교류할 때 사용
- ONLY 부모에서 자식 방향으로만 전달 가능
- children props
  -> 자식 컴포넌트에서는 {props.children}으로 받기
- 구조 분해 할당으로 props 내부값 추출
  -> props. 붙일 필요 없음
- defaultProps
  -> 부모 컴포넌트에서 props를 받기 전까지 사용하는 임시 props
  -> 설정 방법
  Child.defaultProps={name: '기본 이름'}
  function Child({name = '기본이름'})
State
- const [value, serValue] = useState(initialState)
- 새로고침을 하면 초기값(initialState)로 돌아간다.

import React, { useState } from "react";
useState를 import하는 걸 빼 먹어서 'undefined'떴다.

불변성
- 원시데이터가 아닌 객체, 배열 함수등은 불변성이 없다.
- React에서는 State 변화가 있을 때 리렌더링 한다.
  -> Sate 변화 전, 후의 메모리 주소를 비교해서 변화를 확인
  -> 원시데이터가 아닌 데이터를 직접 수정하면 값은 바뀌지만 메모리 주소는 바뀌지 않아 리렌더링이 일어나지 않는다.
- 불변성을 지키기 위해 전개연산자(...)를 이용해 값을 수정, 추가하는 방식으로 구현한다.
컴포넌트와 렌더링
- React에서의 렌더링: 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업
- 브라우저 렌더링 = 페인팅
컴포넌트 스타일링
- 새로운 프로젝트 만들기
  yarn create react-app 프로젝트이름
- CSS 코드 분리
  -> class 대신 className 사용
  -> CSS 파일에서는 "" 대신 기존 CSS 문법 사용
반복되는 컴포넌트 처리
- map() 사용하기
컴포넌트 분리
- 관심사의 분리
- 'components'폴더에 js파일로 만들어 분리
- export default / import 잊지 말기
배포
- Vercel
- Git repository에 push한 프로젝트를 이용
- 수정사항을 push만 해주면 반영이 된다.

Quiz
- 컴포넌트 만들기(학습자료_04)
- 컴포넌트를 부모 자식 관계로 연결하기(학습자료_05)
- Props 써보기(학습자료_07)
- Counter 만들기(학습자료_13)
- 컴포넌트 스타일링(학습자료_14)
- 컴포넌트 조건식(학습자료_15)
- 컴포넌트 분리(학습자료_16)

오늘부터 매일 1문제씩 풀기!
- n의 배수 고르기
  -> 배열은 for in이 아닌 for of
  -> filter()사용해서 간단히 풀 수 있다.

화살표 함수, this
- function은 호출을 할 때
- 화살표 함수는 선언할 때 this가 정해진다.
구조 분해 할당(Destructuring)
- 분해 할 때 기존 배열에 없는 인자를 추가하면 'undefined'가 뜨고 이 때만 분해 할당 과정에서 값을 할당할 수 있다.
  -> let [a,b,c,d = 4] = arr
- 분해 할당할 때 우선순위는 낮기 때문에 기존 배열에 있는 값을 바꾸면 분해 전의 값이 그대로 나온다.

단축 속성명 (property shorthand)
- key와 value의 이름이 같으면 하나는 생략 가능
전개 구문 (Spread)
- ...arr
- arr의 내용을 그대로 복사해오는 것!
- 복사해 온 값은 바꿀 수 있고, 새로운 값을 추가할 수도 있다.
나머지 매개변수(rest parameter)
- function func (a, b, ...args)
  -> ...args는 a,b를 제외한 나머지 부분
named export vs default export
- default Export의 경우 import는 아무 이름으로 해도 된다.
- named Export의 경우 import할 때 이름을 바꾸려면
  'as' 사용
  -> import {Name1 as newName} from "name.js"
Convention
- UPPER_CASE: 상수
- kebab-case: css, id, class
- camelCase: 변수, 함수, 파일 이름
- PascalCase: React Component