1. 컴포넌트란?
- 리액트 앱을 이루는 최소한의 단위
- 컴포넌트를 재활용 할 수 있게 됨
2. JSX란?
- 자바스크립트 + XML
- 자바스크립트의 확장 문법
3. Lifecycle이란?
- 생성 될 때(마운트), 업데이트 할 때, 제거할 때(언마운트) 등 특정 주기마다 사용할 수 있는 api가 있는데 그런 api를 라이프 사이클이라고 한다.
4. Props란?
- 컴포넌트에 전달되는 읽기 전용 속성
- 부모 컴포넌트에서 자식 컴포넌트로 전달함. 자식 컴포넌트는 props를 수정할 수 없기 때문에 읽기 전용 속성임.
- 컴포넌트는 프롭스를 받아서 엘리먼트를 반환한다.
5. State란?
- 상태
- 컴포넌트의 속성값을 저장, 변경할 수 있는 객체
- 컴포넌트의 메모리
6. SPA란?
- single page application의 줄임말
- 한 개의 페이지로 이루어진 애플리케이션
- 전통적인 웹 페이지들은 여러 페이지로 이루어져 사용자가 다른 페이지로 이동할 때마다 새로운 Html을 받아 서버에서 리소스를 전달받아 해석하는 과정을 거쳤다. 하지만 지금은 웹 사이트에서 제공되는 데이터가 많기 때문에 서버에서 매번 리소스를 전달하면 성능상의 문제가 발생할 수 있어서 react는 뷰 렌더링을 사용자의 브라우저가 하도록 한다.
- 변화가 필요한 부분만 js 및 데이터 api 호출로 업데이트를 하는 방식
7. React Hooks란?
- 함수형 컴포넌트에서 클래스형 컴포넌트 기능 사용할 수 있게 하는 기술
- 상태값 관리(useState), 컴포넌트 생명주기 함수(useEffect) 등을 사용 가능
- hook은 최상위 레벨에서만 사용할 수 있음(중첩 함수, 반복, If문 X)
useEffect
- side effect를 수행할 수 있는 hook
(side effect란? 리액트 컴포넌트 안에서 데이터를 가져오거나, 구독하거나, DOM을 직접 조작하는 등의 모든 동작을 사이드 이펙트라고 한다. 해당 동작들은 다른 컴포넌트에 영향을 줄 수 있고, 랜더링 중에 구현할 수 없기 때문이다.)
useMemo
- 메모이제이션된 값을 반환하는 hook
성능 최적화를 위해서 연산된 값을 재사용할 수 있게 함. - 메모이제이션이란?
기존의 수행한 연산의 결과값을 어딘가에 저장하고, 동일한 입력이 들어오면 재활용하는 프로그래밍 기법. 중복 연산을 방지할 수 있음. 메모리를 조금 더 쓰더라도 성능을 최적화 할 수 있음.
useContext
- context 값을 가져오는 hook
context 객체를 가져와 값을 사용할 수 있음. - 부모가 자식 컴포넌트한테 하나하나 프롭스를 순서대로 전달하지 않고도 컴포넌트 트리 전체의 데이터를 전달할 수 있게 함. => 전역 상태 관리를 할 수 있음.
- useContext를 사용하면 그 사용한 컴포넌트는 항상 리렌더링이 된다.
웹 개발자