오늘의 나는 무엇을 새롭게 배웠나요?

[1] Domain Name Resolution

[2] 브라우저 렌더링

[3] React로 웹사이트 만들기 (Router, Link, Params..)

1. 리액트 라우터 v6

   • 리액트 애플리케이션에서 브라우저의 주소를 다루고, 주소에 따라 해당하는 페이지를 렌더링하는 역할을 한다.
   • v6 버전부터는 기존의 Route 컴포넌트가 Routes로 변경되었다. Routes는 여러개의 Route를 한번에 관리할 수 있도록 개선되었으며, 보다 세밀한 경로 지정이 가능해졌다.

2. Routes

   • Routes 컴포넌트를 사용하여 주소에 따라 해당하는 페이지를 렌더링한다.
   • 각 페이지를 컴포넌트로 만들어 렌더링한다.

3. Link

   • Link 컴포넌트를 사용하여 페이지 이동을 처리한다.
   • 클릭 시 해당 페이지로 이동하며, 브라우저의 주소가 변경된다.

4. useParams

   • 동적인 경로를 처리할 때 사용한다.
   • Route 컴포넌트에서 path에 :파라미터명을 사용하여 해당 위치에 동적인 값을 받아올 수 있으며, useParams 훅을 사용하여 값을 받아올 수 있다.

5. useSearchParams

   • 쿼리를 처리할 수 있다.
   • 주소 끝에 ?key=value 형식으로 쿼리를 작성하고, useSearchParams 훅을 사용하여 해당 값을 받아올 수 있다.

6. useNavigate

   • 페이지 이동을 처리할 수 있다.
   • Link와 달리 클릭 이벤트가 발생하지 않으므로, 이를 사용하여 스크립트로 페이지 이동을 처리할 수 있다.

7. react-helmet 라이브러리

   • react-helmet 라이브러리를 사용하여 페이지의 메타 데이터를 설정할 수 있다.
   • 예를 들어, 페이지 제목, 메타 설명 등을 동적으로 변경할 수 있다.

8. 싱글 페이지 애플리케이션(SPA)

   • 전통적인 방식과 달리, 모든 페이지를 처음에 불러와서 사용자의 상호작용에 따라 필요한 부분만 동적으로 변경하는 방식을 말한다.
   • 리액트는 SPA 방식으로 구현할 수 있는 대표적인 프레임워크 중 하나이다.

9. 리액트가 렌더링하는 방식

   리액트는 가상 DOM(Virtual DOM)을 사용하여 렌더링한다. 가상 DOM은 메모리에 존재하는 가벼운 가상의 DOM 트리로, 실제로 브라우저에서 렌더링되는 DOM과 동일한 구조를 갖는다.

   리액트에서 컴포넌트가 변경될 때마다 실제 DOM과 비교하여 변경된 부분만 업데이트하는 것이 아니라, 가상 DOM과 비교하여 변경된 부분만 실제 DOM에 반영한다. 이를 통해 브라우저의 부하를 줄이고 렌더링 성능을 향상시킬 수 있다.

   또한, 리액트는 SPA(Single Page Application) 방식으로 작동한다. SPA는 한 개의 페이지로 구성된 웹 애플리케이션을 의미하며, 사용자 인터랙션이 발생할 때마다 필요한 데이터만 서버로부터 가져와서 동적으로 화면을 갱신한다. 이를 위해 리액트는 클라이언트 측에서 라우팅을 처리하여 필요한 컴포넌트를 렌더링한다. 이러한 방식은 전체 페이지를 새로고침하지 않기 때문에 더 빠르고 부드러운 사용자 경험을 제공한다.

공부하면서 어떤 어려움이 있었나요?

요즘, 날이 추워서 그런지 심한 감기에 걸렸다.😭😭 그래도 목표했던 학습량은 채워서 뿌듯하다! 컨디션 조절을 못한 것이 어려움으로 작용했다. 빠르게 회복하자

내일의 나는 무엇을 공부해야 할까요?

• 리액트 hook 학습 및 복습
  • useLayoutEffect 라는 Hooks가 있는 것을 알게되었다. 다양한 hooks에 대해 익혀보고자한다.
• 페어프로그래밍
• 알고리즘