프론트 용어[React]

권영균·2021년 5월 2일
1

용어 정리

목록 보기
2/2

SPA (Single Page Application) - 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JavaScript와 CSS 같은 모든 자산을 로드하는 애플리케이션. 페이지 또는 후속 페이지의 상호작용은 서버로부터 새로운 페이지를 불러오지 않으므로 페이지가 다시 로드되지 않음.

React - 웹 개발을 할 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화하고, 오직 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중 할 수 있도록 하기 위해서 여러 라이브러리와 프레임워크가 탄생했는데 그 중 하나. 대표적으로 React, Angular, Vue 가 있다.
React는 Facebook에서 개발한 유저 인터페이스 라이브러리로 개발자로 하여금 재사용 가능한 UI를 생성 할 수 있도록 도와준다.

Virtual DOM - 가상의 DOM. 변화가 일어나면, 실제로 브라우저의 DOM에 새로운 것을 넣는 것이 아니라, JavaScript로 이뤄진 가상 DOM 에 한번 렌더링을 하고, 기존의 DOM 과 비교를 한 다음에 정말 변화가 필요한 곳만 업데이트 함.

JSX - JSX는 자바스크립트의 확장 문법. 문자열도 HTML도 아니다. JSX는 템플릿 언어처럼 보일 수 있지만, 자바스크립트를 기반으로 하고 있다.
https://ko.reactjs.org/docs/introducing-jsx.html

Element(엘리먼트) - React Element는 React 어플리케이션을 구성하는 블록. Element는 화면에 보이는 것들을 기술하며, React Element는 변경되지 않는다.

Component(컴포넌트) - 페이지에 렌더링할 React 엘리먼트를 반환하는 작고 재사용 가능한 코드 조각. 가장 간단한 React 컴포넌트는 React 엘리먼트를 반환하는 일반 JavaScript 함수다. 컴포넌트는 기능별로 나눌 수 있으며 다른 컴포넌트 안에서 사용할 수 있다.

Rendering(렌더링) - React에서 Rendering은 data를 html로 변환해서 renderer에게 전달하는 일관 작업을 뜻한다.

Props - 컴포넌트의 입력값. Props는 부모 컴포넌트로부터 자식 컴포넌트로 전달된 데이터다. Props는 읽기 전용이라는 것에 주의해야한다. Props는 어떤 방식으로든 수정해서는 안 된다.

State - 컴포넌트의 상태값. 컴포넌트와 관련된 일부 데이터가 시간에 따라 변경될 경우 state가 필요하다. state와 props의 가장 중요한 차이점은 props는 부모 컴포넌트로부터 전달받지만, state는 컴포넌트에서 관리된다는 것이다. 컴포넌트는 props를 변경할 수 없지만, state는 변경할 수 있다.

Lifecycle Methods(생명주기 메서드) - 생명주기 메서드(Lifecycle method)는 컴포넌트의 각각의 단계에서 실행되는 커스텀 기능이다. 컴포넌트가 만들어지고 DOM에 삽입될 때(mounting), 컴포넌트가 업데이트될 때 및 컴포넌트가 DOM에서 마운트 해제될 때(unmounted) 혹은 제거될 때 사용할 수 있는 기능을 제공한다.

key - key는 엘리먼트의 배열을 만들 때 포함해야 하는 특별한 문자열이다. key는 React가 어떤 항목을 변경, 추가 혹은 삭제할지 식별하는 것을 돕는다. 엘리먼트들을 안정적으로 식별할 수 있도록 배열 내의 엘리먼트에 key를 제공해야 한다. Key는 같은 배열에 포함된 다른 요소 사이에서만 고윳값을 가져야한다.

Hooks - Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.

profile
GRIT(Growth(성장), Resilience(회복력), Intrinsic Motivation(내재적 동기), Tenacity(끈기))를 중시하는 프론트엔드 개발자입니다.

0개의 댓글