인프런 워밍업 클럽 스터디 1기 FE - 2주차 발자국

리액트 강의 정리(섹션1~5)

Section 1

컴포넌트
- 리액트로 만들어진 앱을 이루는 최소한의 단위(함수형/클래스 컴포넌트)

가상돔
- 인터렉션이 많은 웹의 경우 불필요한 DOM을 조작하는 비용이 큰 문제를 해결하기 위해 나오게 됨
- 데이터가 바뀌면 가상돔에 렌더링이 되고 이전에 생긴 가상돔과 비교해서 바뀐 부분만 실제 돔에 적용시켜 줌

Section 2

SPA Single Page Application
- 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현한 것
- HTML5 History API를 사용하여 페이지 전환 해줌

JSX Javascript Syntax eXtension
- 자바스크립트, HTML 구조 같이 사용할 수 있음 → 기본 UI에 데이터가 변하는 것을 쉽게 구현할 수 있음
- createElement 쉽게 사용하기 위해 사용

React State
컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체

Section 3

React Hooks
- class없이 state를 사용할 수 있는 기능
- useAuth(), useState() ...
Props
properties
상속하는 부모 컴포넌트에서 자식 컴포넌트에 데이터 등을 전달하는 방법
읽기 전용, 자식 컴포넌트 입장에서는 변하지 않음
변하게하려면 부모 컴포넌트에서 state 변경해야 함

State

해당 컴포넌트 내부에서 데이터 전달
변경 가능
state가 변하면 re-render 됨

구조 분해 할당 Destructing → 클린코드 목적
- 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JS 표현식

// 구조 분해 할당
function buildAnimal(animalData){
		let {accessory, animal, color, hairType} = animalData;
		...
}

// 깊게 들어간 객체 구조 분해 할당
let {address:{zipcode, street, number}} = person;

React.memo
- React 컴포넌트를 메모이제이션하여 불필요한 리렌더링을 방지하는 데 사용
- 컴포넌트의 props가 변경되지 않으면 이전에 렌더링된 결과를 재사용

useCallback
- 동일한 콜백 함수가 계속 재생성되는 것을 방지하고, 의존성이 변경되지 않으면 이전에 생성된 콜백 함수를 재사용

useMemo
- compute함수에 넘겨주는 a,b 값이 이전과 동일하다면 컴포넌트가 리렌더링 되더라도 연산을 다시 하지 않고 이전 렌더링 때 저장해주었던 값을 재활용하게 됨

Section4,5

Axios
- http 비동기 통신 라이브러리, promise api 활용
- 인스턴스화 하여 사용

React 애플리케이션에서 라우팅을 관리하기 위한 도구

라우팅 컴포넌트 및 구조 관련
- 중첩 라우팅 : 라우팅 시스템에서 하위 경로에 대한 라우팅을 부모 경로의 컴포넌트 내에서 처리하는 것
- outlet : 라우팅 구성 요소 내에서 렌더링된 컴포넌트의 자식 컴포넌트를 표시하는 데 사용

라우터 훅 관련
- useNavigate : 특정 이벤트 또는 조건에 따라 사용자를 다른 경로로 이동시키고 싶을 때
- useParams : 현재 라우팅된 경로의 URL 매개변수에 액세스하는 데 사용
- useLocation : 현재 애플리케이션의 위치(경로, 쿼리 매개변수 등)에 대한 정보 제공. 이를 통해 현재 경로나 쿼리 매개변수를 읽을 수 있음
- useRoutes : 라우터 구성을 동적으로 생성할 때 사용

Debounce
- 연이어 호출되는 함수 중 마지막 호출 이후 일정 시간이 지난 후에만 실제로 함수를 실행하도록 하는 기술
- 일정 시간 동안 함수 호출을 무시하고, 마지막 호출 이후에만 함수를 실행하여 성능을 향상시키거나 불필요한 작업을 방지할 때 사용

useRef
- React 함수 컴포넌트 내에서 변수를 유지하고 DOM 요소에 접근하는 데 사용
- 컴포넌트 재렌더링 시에도 값이 유지되며, 변경 시에는 컴포넌트가 다시 렌더링되지 않음

후기

리액트를 처음 접했을 때, 컴포넌트 기반 설계의 아이디어는 매력적으로 다가왔다. 한 페이지에서 모든 요소를 관리하고 조작할 수 있다니!! 하지만 이를 실제로 코드로 구현하는 것은 예상보다 훨씬 복잡했다.

컴포넌트 간의 상호작용과 데이터 흐름을 이해하는 데 어려웠다. 예를 들어, 상태가 변경될 때마다 컴포넌트가 어떻게 업데이트되는지 이해하는 것이 쉽지 않았다. 이해하는 것에 매몰되지 말고 일단 구현해보자 하고 예산 계산기 앱 과제를 진행하는데

컴포넌트를 나누는 것까지는 어떻게 했는데 props를 전달하는 메커니즘을 생각하는 게 어려웠다. 부모 컴포넌트에서 자식 컴포넌트로 어떤 데이터를 props로 전달해야 하는지, 어떤 형식으로 전달해야 하는지.. 또한, useState와 useEffect 같은 리액트 훅의 개념을 이해하고 적용하는 것도 쉽지 않았다.

처음에는 막막했지만, 구글과 챗GPT의 도움을 받으면서 조금씩 이해가 되기 시작했다. 그리고 중간 점검때 강사분께서도 실제로 기능 구현을 많이 해보고 다른 사람의 소스코드도 보면서 공부하라는 조언을 새겨들으면서 남은 3주차도 열심히 해보자!!