리액트(React):
리액트는 사용자 인터페이스(UI)를 구축하기 위한 자바스크립트 라이브러리입니다. 주로 웹 애플리케이션에서 동적인 화면을 쉽게 구현하는 데 사용되며, 페이스북에서 개발되었습니다. 리액트의 주요 개념은 컴포넌트입니다. 컴포넌트는 화면의 일부를 캡슐화한 재사용 가능한 코드 단위로, 각각의 컴포넌트가 서로 독립적이면서도 조합되어 전체 UI를 형성합니다.
리액트는 Virtual DOM이라는 개념을 사용하여, 실제 DOM을 조작하기 전에 메모리에서 가상의 DOM을 먼저 업데이트하고, 차이가 있는 부분만 실제 DOM에 반영합니다. 이로 인해 리액트는 성능이 뛰어나고, 복잡한 사용자 인터페이스도 효율적으로 처리할 수 있습니다.
자바스크립트(JavaScript):
자바스크립트는 웹 브라우저에서 실행되는 프로그래밍 언어로, 웹 페이지를 동적으로 만들고 사용자와 상호작용하는 데 사용됩니다. 자바스크립트는 HTML, CSS와 함께 웹의 주요 기술 중 하나이며, 브라우저에서 동작하는 애플리케이션의 기능적 동작을 구현합니다.
리액트와 자바스크립트의 관계:
리액트는 자바스크립트로 작성된 라이브러리입니다. 리액트 컴포넌트를 만들고 사용할 때 자바스크립트 구문을 활용합니다. 즉, 리액트를 배우기 위해서는 자바스크립트를 이해하는 것이 필수입니다. 리액트는 자바스크립트의 확장 문법인 JSX를 사용해, HTML과 같은 구문을 자바스크립트 코드 안에서 작성할 수 있도록 돕습니다.
라이브러리란?
개발에 필요한 기능들을 모아둔 코드 집합체로, 특정 기능을 쉽게 구현할 수 있게 도와줍니다. 즉, 프로그래머가 직접 일일이 코드를 작성하지 않고, 필요한 기능이 있을 때 라이브러리에서 제공되는 함수를 호출해 사용할 수 있습니다. 예를 들어, 데이터를 화면에 출력하거나, API를 호출하는 것과 같은 기능들을 쉽게 처리할 수 있습니다.
컴포넌트란?
독립적인 기능을 가진 코드의 작은 단위입니다. 특히 React에서 컴포넌트는 UI의 특정 부분을 구성하는 기본 단위로, 재사용 가능하고 각 컴포넌트가 고유한 역할을 수행합니다. 예를 들어, 버튼, 입력 창, 네비게이션 바와 같은 UI 요소는 각각 하나의 컴포넌트로 만들어질 수 있습니다. 이 컴포넌트를 조합해 전체 UI를 구성할 수 있죠.
1. JavaScript (JS):
자바스크립트는 웹 페이지를 동적으로 만들고 사용자와 상호작용할 수 있게 하는 프로그래밍 언어입니다. HTML과 CSS가 웹 페이지의 구조와 스타일을 담당한다면, 자바스크립트는 페이지가 동작하도록 기능을 부여합니다.
역할: 기능 추가, 이벤트 처리, 데이터 검증, 페이지 업데이트 등의 동적인 기능을 구현.
2. JSX (JavaScript XML):
JSX는 자바스크립트의 확장 문법으로, 리액트에서 UI를 정의할 때 주로 사용됩니다. JSX는 HTML과 유사한 구문을 자바스크립트 코드 안에서 사용할 수 있도록 해줍니다. 실제로는 자바스크립트 코드로 변환되기 때문에, HTML처럼 보이지만 자바스크립트의 기능을 그대로 사용할 수 있습니다.
역할: 리액트 컴포넌트에서 UI를 정의할 때 HTML처럼 보이는 문법을 사용.
3. CSS (Cascading Style Sheets):
CSS는 웹 페이지의 스타일을 정의하는 언어입니다. HTML이 웹 페이지의 구조를 정의한다면, CSS는 이 구조의 각 요소들이 어떻게 보일지(색상, 글꼴, 배치 등)를 설정합니다. CSS는 HTML과 함께 사용되어 웹 페이지의 디자인을 담당합니다.
역할: 색상, 배경, 레이아웃, 글꼴 스타일링 등 시각적인 부분을 정의.
4. HTML (HyperText Markup Language):
HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 웹 페이지의 텍스트, 이미지, 링크 등을 포함한 구조를 만들 때 사용됩니다. HTML 요소는 웹 문서에서 특정 역할을 하는 콘텐츠를 구분하고, 브라우저가 이 요소를 해석하여 화면에 렌더링(코드를 실제 화면으로 변환하는 과정)합니다.
정적인 구조
역할: 웹 페이지의 구조 정의, 콘텐츠 배치.
마크업 언어?
마크업 언어는 텍스트에 구조와 의미를 부여하는 언어입니다. 쉽게 말해, 텍스트에 태그를 추가해 문서의 구조나 표현 방식을 정의하는 언어죠. 대표적인 마크업 언어로는 HTML(HyperText Markup Language)이 있습니다. HTML은 웹 페이지의 구조를 정의하는 데 사용되며, 제목, 문단, 이미지, 링크 등의 요소를 배치하고 그 역할을 지정합니다.
