[77/100] 240801

리액트의 기본 구조

 

리액트 애플리케이션에는 컴포넌트, jsx, 상태 관리, props, 생명주기 메서드등이 있다.

 

컴포넌트란 ?

 

리액트를 구성하는 기본 단위로 ui를 재사용 가능한 독립적인 조각으로 나누며 함수형 컴포넌트와 클래스형 컴포넌트로 나뉩니다.

 

jsx란?

 

javascript를 확장한 문법으로 react 엘리먼트를 생성한다. html과 문법이 유사하며 ui를 표현 가능하다.

 

리액트에서 props란?

 

Props는 "properties" 의 줄임말로, 리액트 컴포넌트에 전달되는 데이터이다.

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고 컴포넌트를 재사용 가능하고 동적으로 만든다.

읽기전용이며 자식컴포넌트에서 직접 수정이 불가능하다.

부모 컴포넌트에서 변경되면 자식 컴포넌트도 자동으로 업데이트 된다.

 

상태관리란?

 

컴포넌트의 데이터를 관리하며

useState, useReducer등의 훅을 사용하여 구현.

상태가 변경시 컴포넌트가 다시 렌더링한다.

※useState는 react컴포넌트 내에서 상태를 관리하기 위한 hook

useReducer는 useState의 대안으로 사용되는 hook이며 현재의 상태와 액션을 받아서 새로운 상태를 반환하는 reducer 함수를 사용한다. 주로 여러 하위값을 포함하는 복잡한 상태 로직이나 다음 상태가 이전의 상태에 의존적인 경우 주로 사용.

 

주요 훅들

useState: 상태 관리
useEffect: 부수 효과 처리 (예: 데이터 페칭, 구독 설정 등)
useContext: React Context 사용
useReducer: 복잡한 상태 로직 관리
useCallback, useMemo: 성능 최적화
useRef: DOM 요소에 접근하거나 변경 가능한 값을 저장

 

Hook의 장점:
클래스 컴포넌트 없이 상태 관리와 생명주기 기능 사용 가능
로직 재사용 용이
관련 로직을 한 곳에 모아 가독성 향상

 

생명주기 메서드?

 

컴포넌트의 생성, 업데이트, 제거 등 각 단계에서 실행되는 메서드로 함수형 컴포넌트에서는 useEffect 훅으로 대체 가능하다.

 

가상 DOM?

 

실제 DOM의 가벼운 복사본으로 변경사항을 가상 DOM에 미리 적용한 후 실제 DOM과 비교하여 필요한 부분만 업데이트 한다.

 

리액트에서 무명함수를 사용하는 이유?

 

무명함수는 선언된 곳의 스코프에 접근 가능해서 state나 props에 쉽게 접근 가능하며

한번만 사용하는 경우 굳이 이름을 붙이지 않고 사용이 가능하고

코드를 간결하게 해줘서 가독성을 높여준다.

런타임에 동적으로 함수를 생성하고 사용가능

콜백함수로써 사용해서 이벤트의 핸들러나 고차 함수의 인자로 간편하게 함수를 전달할 수 있기 때문에.