React
React란? 사용자 인터페이스를 위한 라이브러리
사용자 인터페이스란(UI, User Interface)?
사람(사용자)과 사물 또는 시스템, 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체(출처: 위키백과)
라이브러리란?
소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임으로 구성 데이터, 문서, 도움말 자료, 메시지 틀, 함수, 클래스 등을 포함(출처: 위키백과)
- 컴포넌트를 활용해 독립적, 재사용 가능한 개발 가능
- 가상돔으로 브라우저 내 발생하는 연산을 줄여 성능 개선
- 단방향 데이터 흐름으로, 오직 부모에서 자식으로만 데이터가 흘러 자식이 부모 구성요소에 영향을 미치지 않아 일관성 유지
Component
React App을 이루는 최소한의 단위
JSX
JavaScript + XML
Lifecycle
리액트의 컴포넌트가 실행되거나 업데이트, 제거될 때 특정한 세기 주기에서 특정한 이벤트들이 발생한다.
Props(Properties)
컴포넌트에 전달되는 읽기 전용 속성으로, 값을 받기만 할 뿐 변경할 수 없다.
쿠키틀로 비유하면 Props라는 재료를 Component라는 쿠키틀에 부으면 쿠키(원소)가 출력된다.
State
상태. 컴포넌트의 속성값을 저장, 변경할 수 있는 객체이다.
SPA(Single Page Application)
한 개의 페이지로 이루어진 애플리케이션이라는 뜻이다.
전통적인 웹 페이지는 여러 페이지로 구성되어 있었다. 그래서 새로운 페이지를 로딩할 때마다 서버측에서 뷰를 반환하는데 성능 문제가 발생해서, 변화가 필요한 부분만 JS 및 데이터 API 호출로 업데이트하는 SPA가 유용하다.
React Hooks
React 16.8부터 추가된 기능으로 함수형 컴포넌트에서 클래스형 컴포넌트 기능 사용할 수 있게 하는 기술.
상태값 관리(useState), 컴포넌트 생명주기 함수(useEffect) 등을 이용할 수 있게 되었다.
- 최상위 레벨에서만 Hook을 호출해야 한다.
- React Component 내에서만 호출해야 한다.
- useState
상태(state)를 관리할 수 있는 hook
- useEffect
side effect를 수행할 수 있는 hook
- useMemo
메모이제이션된 값을 반환하는 hook
- useContext
context 값을 가져오는 hook
