React 용어 정리 (2)

eeensu·2023년 8월 2일
0

React 기본

목록 보기
3/22
post-thumbnail
  • 엘리먼트 (Element)
    react의 기본 단위로, 컴포넌트의 가장 작은 부분을 의미한다. JSX 혹은 TSX를 사용하여 정의하며, react 엘리먼트는 가상 DOM을 생성한다.

  • 훅 (Hook)
    함수형 컴포넌트에서 상태(state)와 라이프사이클 로직을 관리하기 위한 기능을 제공하는 react의 API이다. hook이라는 영단어는 갈고리라는 뜻을 갖고 있는데, 일반적인 프로그래밍에서는 원래 존재하는 어떤 기능에 마치 갈고리를 거는 것처럼 끼어 들어가 같이 수행되는 것을 의미하며, react의 hook도 state와 생명주기 함수에 갈고리를 걸어 개발자가 원하는 시점에 정해진 함수를 실행되도록 하는 기능이다. useState(), useEffect(), useContext() 등이 대표적인 hook이다.

  • 이벤트 핸들링 (Event Handling)
    웹 애플리케이션에서 사용자의 동작에 반응하기 위해 발생하는 이벤트를 처리하는 것을 말한다. 예를 들어 버튼 클릭, 입력 등의 이벤트에 대한 로직을 작성한다. react의 이벤트 핸들링은 대부분 엘리먼트 태그의 이벤트에서 발생하는데, 기존의 onclick 처럼 소문자가 아닌, onClick 처럼 카멜 표기법 (Camel case) 가 적용되어 있다.

  • 렌더링 (Rendering)
    react의 컴포넌트가 사용자의 화면에 표시될 UI를 생성하고 브라우저에 보여주는 과정을 뜻한다. 유저의 이벤트 발생, 서버의 상태 변화 등에 따라 렌더링이 다시 발생한다. 이를 리렌더링 (re-rendering) 이라 한다.

  • 재사용성 (Reusability)
    컴포넌트나 함수 등을 여러 곳에서 반복해서 사용할 수 있도록 설계하는 것을 말한다. react에서는 컴포넌트 기반 아키텍처를 통해 높은 재사용성을 구현할 수 있도록 해주며, 개발을 할 때 높은 재사용성을 통해 효율적인 유지보수를 할 수 있도록 권장한다.

  • 타입스크립트 (TypeScript)
    js에 정적 타입을 추가한 슈퍼셋 언어로, 마이크로소프트에서 개발하였다. 컴파일 시점에서 타입 오류를 체크하여 개발자의 실수를 방지하고 코드의 가독성을 높여 개발을 도와준다. 줄여서 ts라고도 지칭하기도 한다.

  • TSX
    ts를 사용하여 작성된 react 컴포넌트의 확장자를 나타내는 것으로, js 코드에 타입 정보를 포함할 수 있는 기능을 제공한다. ts 전용의 jsx라고 볼 수 있다.

  • 사이드 이펙트 (Side Effect)
    함수나 메서드의 실행이 외부에 영향을 주는 것을 말한다. react의 함수형 컴포넌트에서는 useEffect() hook을 사용하여 사이드 이펙트를 다룬다. 이를 통해 개발자는 보다 효율적이고 직관적인 코딩을 할 수 있다.

profile
안녕하세요! 26살 프론트엔드 개발자입니다! (2024/03 ~)

0개의 댓글