React

1. React.js

• 브라우저에서 동작하는 복잡하고 여러가지 기능을 하는 js를 쉽게 만들어내는 기술, react는 node.js를 기반으로 돌아가는 기술이기 때문에 node.js 없이는 사용하기가 어렵다.
• Meta가 개발한 오픈소스 JavaScript 라이브러리 이다.
• 대규모의 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어진 기술
• 넷플릭스, 페이스북, 인스타, 노션, ...

2. npm

• Node Packaged Manager
• 자바스크립트 프로그래밍 언어를 위한 패키지 관리자
• node로 만들어진 여러 앱을 편리하게 사용할 수 있는 앱
• 패키지 관리 : npm은 Node.js 패키지를 설치하고 관리하는 도구로, 다른 개발자들이 작성한 코드 패키지를 손쉽게 가져와서 사용할 수 있게 한다.
• 의존성 관리 : 프로젝트가 의존하는 다양한 패키지들을 관리하고, 프로젝트에 필요한 버전을 쉽게 지정할 수 있다.

3. 리액트의 특징

• 컴포넌트를 기반으로 UI를 표현한다.
• 화면 업데이트 구현이 쉽다
• 화면 업데이트가 빠르게 처리된다.

4. Vite(비트)

• 차세대 프론트 엔드 개발 툴

5. 프로젝트 생성

• npm create vite@latest
• npm run dev : 서비스 실행
• ctrl + c , q : 서버 종료

6. jsx

• 자바스크립트 확장판
• javascript extentions
• 확장된 자바스크립트의 문법을 말한다.

7. React 컴포넌트

• react 에서 HTML 태그를 반환하는 함수를 컴포넌트(Components)라고 부른다.
• react 에서는 첫 글자를 대문자로 만들어야지만 컴포넌트로 인식한다.

8 JSX의 주의사항

• 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다.
  -> 한줄의 코드가 특별한 값으로 표현하는 식으로 넣을 수 있다.
  -> if, for문 작성시 오류 발생
• 숫자, 문자열, 배열 값만 렌더링 된다
• 모든 태그는 닫혀 있어야 한다. HTML 태그에서는 < img > 태그는 닫아주지 않아도 되었지만
  react는 엄격하다. -> 태그에 매우 엄격함.
• 최상위 태그는 반드시 하나여야만 한다.

9. Props

• 전달되는 값
• Properties의 줄임 말
• props는 부모 컴포넌트에서 자식 컴포넌트로만 전달이 가능하다. 자식에서 부모로 전달하는 것은 불가능 하다.

10. 이벤트 핸들링

11. SyntheticBaseEvent

• 합성 브라우저 이벤트 객체, 모든 브라우저의 이벤트 객체를 하나로 합친 이벤트 객체

12. State

• 상태, 현재 사물들이 가지고 있는 상태 값
• 컴포넌트의 State가 바뀌면 react는 State의 상태를 점검하게 되고, 렌더링 체크 후 상대값을 바꾼다.
• 컴포넌트가 다시 렌더링 되는 상황
  -> 리렌더, 리렌더링
• 배열의 첫번째 요소는 새롭게 생성된 state 값
  -> state의 현재 값
• 배열의 두번째 요소는 함수
  -> state를 변환시키는 상태 변화 함수
• react 컴포넌트는 state 값이 바뀔때만 리렌더링이 된다. 일반변수는 리렌더링이 일어나지 않는다.

13. 리액트에서 리렌더링이 이루어지는 경우

• 자신이 관리하는 state값이 변경되었을 때
• 자신이 관리하는 props의 값이 변경되었을 때
• 부모 컴포넌트가 리렌더링이 되었을 때

14. useRef

• 새로운 Reference 객체를 생성하는 기능
• const 변수 = useRef();
• 컴포넌트 내부의 변수로 활용 가능
• 어떤 경우에도 리렌더링을 유발하지 않음

15. React Hooks

• 클래스 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있도록 처리하는 기능이다
• Hooks -> class에 있던 기능을 낚아채서 function에 넣는 기능이다
• useState, useRef.. : 이름앞에 use라는 접두사가 붙는 특징이 있다.
• use + ...: 커스텀 훅을 개발자가 만들 수도 있다.
• 함수 컴포넌트 내부에서만 호출 가능
• 조건문, 반복문 내부에서는 호출 불가
• Custom 훅 제작 가능하다.

16. 리액트 컴포넌트의 라이프 사이클

• Mount
  -> 컴포넌트가 탄생하는 순간
  -> 화면에 처음 렌더링 되는 순간
  -> 서버에서 데이터를 불러오는 작업
• Update
  -> 컴포넌트가 다시 렌더링 되는 순간
  -> 리렌더링 될때를 의미
  -> 어떤 값이 변경되었는지 콘솔에 출력
• UnMount
  -> 컴포넌트가 화면에서 사라지는 순간
  -> 렌더링에서 제외되는 순간을 의미한다.
  -> 컴포넌트가 사용하던 메모리를 정리
  

17. useEffect

• 리액트 컴포넌트의 사이드 이펙트를 제어하는 훅
• 컴포넌트가 어떤 변화가 발생했을 때 발생하는 효과

17-1. 두번째 인수 배열

• 두번째 인수 배열에 무엇이 담기는지에 따라 useEffect가 달라진다.
• 의존성 배열, dependency array라고 불리고 줄여서 deps(뎁스)라고 부른다.

18. 리액트 개발자 도구 설치

• https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko&utm_source=ext_sidebar

19. react에서 keyprops를 사용해야 하는 경우

• 배열을 렌더링할 때: 예를들어, map 함수를 사용하여 배열의 각 요소를 컴포넌트로 변환하는 경우에는 각 요소에 고유한 key prop를 제공해야 한다
• 동적으로 생성된 컴포넌트 리스트 : 컴포넌트가 동적으로 생성되는 경우, 각 컴포넌트에 고유한 key prop를 지정하여 React가 컴포넌트의 상태를 올바르게
  추적하고 관리할 수 있도록 해야한다.
• 재사용 가능한 컴포넌트 : 재사용 가능한 커포넌트에서도 key prop를 사용하여 각 인스턴스를 고유하게 식별할 수 있도록 한다.

20. useReducer 훅

• 컴포넌트 내부에 새로운 state를 생성하는 훅이다
• 모든 useState는 useReducer로 대체가 가능하다.

21. 최적화

• 웹 서비스의 성능을 개선하는 모든 행위를 일컫는다
• 아주 단순한 것부터 아주 어려운 방법까지 매우 다양하다

21-1. ReactApp 내부의 최적화 방법

• 컴포넌트 내부의 불필요한 연산 방지
• 컴포넌트 내부에 불필요한 함수 재생성 방지
• 컴포넌트의 불필요한 리렌더링 방지

21-2. useMemo

• 메모이제이션 기법을 기반으로 불 필요한 연산을 최적화하는 리액트 훅이다.
  -> useMemo();
  // param1 : 콜백함수
  // param2 : deps, deps의 값이 바뀌면 callback함수를 다시 실행한다
  그리고 해당 함수가 반환하는 값을 useMemo는 다시 반환
  let a = useMemo(() =>{ return 1; } []);

22. React.memo

• 컴포넌트를 인수로 받아, 최적화된 컴포넌트로 만들어 반환
  const memoizedComponent = memo(대상 컴포넌트);
• props를 기준으로 메모이제이션이 된다.
• 부모가 리렌더링이 되더라도 props의 값이 바뀌지 않으면 리렌더링이 되지않는다.

23. props 가 많은 컴포넌트를 최적화 하는 방법

• 함수들 자체를 메모이제이션해서 리렌더링 되더라도 방지하는 방법, 다른 훅을 사용해야한다
• 인수로 callback 함수를 전달해서 기능을 커스텀 해주면 된다.

24. 최적화

• 리액트 앱을 최적화 할때는

1. 기능 완성이 먼저
2. 그 다음에 최적화를 진행한다.
   -> 최적화의 대상은 모든것에 최적화를 하면 안되고,

• 간단한걸 렌더링 해주는 함수는 최적화를 해주기 보다는 리렌더링 되는게 빠를 수 있다. 최적화가 되어야 하는 영역에 대해서만 최적화를 시켜 준다.

25. Context

• 컴포넌트간의 데이터를 전달하는 또 다른 방법
• 기존의 props가 가지고 있는 단점을 해결할 수 있다.

25-1. props의 단점

• App -> Child , props는 부모 -> 자식으로만 데이터를 전달할 수 있다.
• 만약 컴포넌트의 구조가 두 단게 이상으로 깊어진다면, App에서 ChildB에게 데이터를 전달할 때 props를 다이렉트로 전달할 수 없고, ChildA라는 컴포넌트가 중간다리 역할을 해야한다. -> Props Drilling

25-2. Provider

• Context에 공급할 데이터를 설정하거나, Context에 공급받을 컴포넌트를 설정하기 위해서 사용한다.
• Provider는 사실 컴포넌트이다.
  <TodoContext.Provider /> 로 사용할 수 있다.
• TodoContext.Provider로 감싸져 있는 태그는 TodoContext를 쓰겠다는 의미, 공급할 데이터는 value={}를 사용한다.

26. 페이지 라우팅

26-1. 페이지 라우팅이란?
-> 경로에 따라 알맞은 페이지를 렌더링 하는 과정
-> URL로 /new -> new 페이지가 렌더링된다

26-2. MPA
-> Multi Page Application
-> 애초에 서버가 여러개의 페이지를 가지고 있다. 많은 서비스가 사용하는 전통적인 방식이다. 사용법이 직관적이다.
-> 단점 : 서버의 부하가 심해질 수 있다.

26-3. SPA
-> Single Page Application
-> 다수의 사용자가 접속해도 크게 상관이 없다.
-> 페이지의 이동이 매끄럽고 효율적이다.

26-4. 결론
-> MPA 방식 : 페이지 이동시 모든 요소가 교체가 된다
-> SPA 방식 : 필요한 요소만 교체가 된다.

27. React Code Splitting

28. React children

• 태그와 태그 사이에 모든 내용을 표시하기 위해 사용하는 특수한 props다

29. < Outlet/ >

• < BasicLayout > 에서 기본 틀 잡아주고,
  < IndexPage > 가 2차 메뉴를 잡아주고,
  컴포넌트마다 적용되는 내용은 < Outlet > 에 적용된다.
• ListPage는 ListPage에 필요한 디자인만 넣으면 된다.

30. useParams

• url 파라미터값을 알기위해 사용하는 훅
• 현재 경로의 URL 파라미터 값을 추출할 수 있는 편리한 방법
• 예를들어, /users/:id 와 같은 동적 경로를 사용하는 라우트에서 :id 부분에 해당하는 값에 접근할 수 있다.

31. useSearchParams

• URL의 쿼리 파라미터를 다루는데 사용된다.
• ?key = value 형식으로 URL에 추가되는 파라미터를 말한다.

32. createSearchParams

• 클래스를 통해 브라우저의 URL 쿼리 파라미터를 조작하는 것을 의미한다.
• URL의 query string을 다루는데 사용한다.