TIL 0809

오늘의 회고록

어제 JS 복습 후 오늘 react 입문을 시작하였다 밑에 내용을 정리하면서 다시 리마인드한다

CRA (Creat-react-app)

react 프로젝트를 좀 더 쉽게 실행하기 위해 사용한다

실행 명령어

yarn create vite my-react-app

Vite

Vite 역시, CRA와 같이 리액트 프로젝트를 풀 세팅해주는 빌드 도구이다 CRA보다 속도가 빠르기 때문에 사용한다

실행 명령어

yarn create vite my-react-app --template react

react 폴더를 생성할때 create -> creat로 실행해서 오류가 떠서 한참 헤매었다

컴포넌트

컴포넌트를 사용하여 재활용이 가능하게 사용할 수 있다
class랑 function으로 선언 할 수 있지만 함수를 더 많이 자주 사용한다

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

jsx 문법 안에 JS 문법을 사용할려면 {}안에 사용해야 한다

Props

컴포넌트 사이에 정보를 전달 할 수 있는 방법이다

부모에서 자식으로 전달 가능하며 자식에서 부모는 불가능 하지만 어떤 기술을 쓰면 가능한걸로 안다 추후에 더 배워보자

Props Children

import React from "react";

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

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

처음에 이해가 잘 안갔지만 자식 컴포넌트로 받아온 내용안에 내용을 넣어서 보여주고 싶으면 children이라는 객체로 들어가서 해당 객체로 접근하면 된다는걸 이해했다.

state

State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다.

const [num, useNumber] = useState(1);
//초기 값과 변경될때 사용할 변수랑 함수를 배열에 넣어서 사용한다

불변성

react 리랜더링 될때 state에 변경점을 확인하고 리랜더링 되는데 메모리값을 바로 바꾼 부분은 변경됐다고 인식하지 못해서 리랜더링이 일어나지 않는다 이 부분은 완벽하게 이해를 못해서 다시 들을 예정이다.

불변성을 지키기 위해 스프레드 연산자를 사용해서 새로운 배열이나 객체를 리턴한다

DOM

엘리먼트(html 요소)가 모인 부분을 트리로 구성한게 DOM이다

가상돔

실제돔을 복사해서 메모리에 객체로 저장되어 사용하는 돔으로 변경 전 돔과 변경 후의 돔을 가지고 두개를 비교 후 한번에 변경된 돔을 적용하므로 빠르다는 장점을 가지고 있다

refactoring

컴포넌트를 폴더로 나누고 map과 filter을 사용하여 좀 더 간결하고 가독성 있게 보여 줄 수 있다 이 부분은 분해할당이 완벽하게 이해가 안되어서 다시 들을 예정이다

오늘 react 입문을 시작했는데 처음에는 이해가 잘 되었지만 마지막 refactoring 부분에서 여러개가 섞여서 듣더니 뇌 정지가 와서 이 부분을 정복할때까지 정독할 예정이다!