[React] 리액트 기본 개념 및 용어 정리

❓ 리액트란?

리액트는 사용자 인터페이스(UI) 구축을 위한 JavaScript 라이브러리이다.

특징으로는

• 컴포넌트 기반 으로, UI를 재사용 가능한 독립적인 부품인 컴포넌트로 나누어 개발한다. (재사용성)
• 선언형 으로, 개발자가 무엇을 그릴지에 대해 선언하면 리액트가 어떻게 그릴지를 알아서 처리한다. (예측 가능 → 디버깅)
• 가상 DOM을 사용 하여 실제 DOM에 접근하지 않고 메모리에 가상의 DOM을 만들어 사용한다. (성능 최적화)
• 단방향 데이터 흐름 을 가지고 있어 부모 컴포넌트에서 자식 컴포넌트로만 데이터가 흐르게 된다. (안정성, 디버깅)

정리하자면 리액트는 UI를 효율적으로 만들고 관리하기 위한 도구로, 컴포넌트, 선언적, 가상 DOM 등의 특징을 가지고 있다.

💻 리액트 용어

리액트를 공부하다보면 자주 사용되는 용어들이 있는데 이것만 정확하게 알아도 코드를 보거나 정보를 찾기가 수월해진다.
(꼭 리액트에서만 쓰이지 않는 단어들도 있다.)

• 랜더링 : 웹 사이트에서 데이터를 가져와 사용자가 볼 수 있게 화면에 그려주는 과정
  ▸ 글씨, 사진, 버튼 등 이 모든것들을 웹 브라우저가 계산해서 보여주는 과정
  ▸ React에서는 가상 DOM을 만들어 가상 DOM과 실제 DOM을 비교하며 변경된 부분만 찾아서 화면을 효율적으로 업데이트 한다.
  

• 컴포넌트 : 독립적이고 재사용 가능한 UI 조각
  ▸ 웹 페이지의 Header, Sidebar, Content, Footer 등 요소를 각각 하나의 컴포넌트로 만들 수 있다.
  ▸ 재사용성, 독립성, 계층구조
  

• 라우팅 : 사용자가 요청한 url 경로에 따라 적절한 컴포넌트를 보여주는 기능

• 훅 : 함수 컴포넌트 안에서 React의 상태 관리나, 생명주기 기능 등을 사용할 수 있게 해주는 함수
  ▸ 이전에는 클래스 컴포넌트에서만 가능했던 기능들을 함수 컴포넌트에서 사용할 수 있게 해주는 도구
  ▸ useState : 컴포넌트 안에서 변하는 값(상태)을 저장하고 관리
  ▸ useEffect : 컴포넌트가 화면에 그려지거나 업데이트될 때 또는 사라질 때 특정 작업 수행 가능
  ▸ useContext : 여러 컴포넌트에 걸쳐 데이터를 쉽게 공유할 수 있게 함

• 번들러 : 분리된 JavaScript와 CSS 모듈 코드를 브라우저에 최적화된 여러 개의 파일로 결합한다.
  ▸ Webpack , Browserift 가 주로 사용된다.

• JSX : JavaScript의 확장 문법으로 JS 안에 HTML 과 같은 마크업을 작성할 수 있게 해준다.
  ▸ UI구조와 로직을 한 곳에 작성할 수 있어 가독성이 좋고 개발 생산성을 높여준다.

• 앨리먼트 : React 애플리케이션을 구성하는 블록이며, 일반적으로 직접 사용되지 않고 컴포넌트로부터 반환된다.

• props : 컴포넌트의 입력값으로, 부모 컴포넌트로부터 자식 컴포넌트로 전달된 데이터이다. (읽기 전용!)
  ▸ 사용자의 입력 또는 네트워크 응답에 반응해 값을 수정할 경우 state 사용
  

• state : 데이터가 변경되는 경우 사용하며, props 와 달리 부모 컴포넌트에서 전달 받지 않고 컴포넌트에서 관리된다.