React
리엑트는 프론트앤드 개발을 위한 JavaScript 오픈소스 라이브러리입니다.
React의 특징
1. 선언형
한 페이지를 보여주기 위해 HTML / CSS / JS로 나눠 적기보다는
하나의 파일에 명시적으로 작성하기 위해 JSX(HTML과 JS가 결합한 문법)를 활용한 선언형 프로그래밍을 지향
2. 컴포넌트 기반
리엑트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발
컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에 기능 자체에 집중하여 개발 가능
컴포넌트는 독립이 가능해서 각 컴포넌트의 기능 작동 자체에 집중한 개발이 가능
또한 재사용이 용이하여 유지보수나 테스트에도 뛰어남
3. 범용성
리엑트는 JavaScript 프로젝트 어디에든 유연하게 적용될 수 있고
facebook에서 주도하여 개발되기 때문에 안정적이고 가장 유명하며 리엑트 네이티브(리엑트의 형제격)을 사용해 모바일 개발도 가능
JSX: JavaScript XML
Javascript XML의 준말로 리엑트에서 UI를 구성할 때 사용하는 Javacript를 확장한 문법
JSX를 사용하여 리엑트 엘리먼트를 만들 수 있음 → 자바스크립트 만으로도 마크업 형태의 코드를 작성하여 DOM에 배치할 수 있음
JSX는 엄밀히 말해 Javascript의 코드가 아니기 때문에 Babel이라는 소프트웨어를 통해 리엑트를 Javascript 코드로 변환시켜줌.
Babel
Babel은 무료 오픈 소스 Javascript 트랜스 컴파일러
모든 브라우저, 기기 별 대응을 위해 ES5 이하의 문법으로 바꾸면서 JSX 문버블 자바스크립트 언어로 바꿔줌
컴파일러 언어는 소스코드를 한번에 다른 목적의 코드로 번역, 한번에 실행
인터프리터 언어는 한 줄씩 코드를 실행하며 즉시 명령을 실행함
인터프리터 언어는 컴파일러 언어에 비해 실행은 빠르지만 한 줄씩 번역되므로 명령 자체의 속도는 느림
마크업 언어는 html,xml,svg 등 동적인 역할을 하지 않고 텍스트와 구별되는 태그로 이루어진 문서
프로그래밍 언어는 java,JS,python,c++,c.. 등 프로그림을 만드는 언어
자바스크립트는 인터프리터 언어라 브라우저에서 동작하기 위해 변경이 따로 필요없지만 JSX를 자바스트립트 언어로 바꿀 때 Babel이 필요하고 화살표 함수나 Promise같은 비교적 최신 문법, ES6 이후 문법을 ES5 문법으로 바꿔주어서 로우환경에서도 동작가능케 함
JSX의 규칙
{
"object": "block",
"id": "e0e5748a-65fb-4aef-94b7-ed8b5e9b4df7",
"parent": {
"type": "block_id",
"block_id": "46cbf7c5-570a-4461-a25b-44b85f3213d1"
},
"created_time": "2026-07-01T14:43:00.000Z",
"last_edited_time": "2026-07-01T14:43:00.000Z",
"created_by": {
"object": "user",
"id": "2ecd872b-594c-81f7-92e3-000210a8d473"
},
"last_edited_by": {
"object": "user",
"id": "2ecd872b-594c-81f7-92e3-000210a8d473"
},
"has_children": false,
"in_trash": false,
"type": "heading_4",
"heading_4": {
"rich_text": [
{
"type": "text",
"text": {
"content": "하나의 엘리먼트안에 모든 엘리먼트 포함시켜야 함",
"link": null
},
"annotations": {
"bold": false,
"italic": false,
"strikethrough": false,
"underline": false,
"code": false,
"color": "default"
},
"plain_text": "하나의 엘리먼트안에 모든 엘리먼트 포함시켜야 함",
"href": null
}
],
"is_toggleable": false,
"color": "default"
},
"archived": false
}최상위 태그는 opening tag와 closing tag로 감싸주어야 함 ⇒ 독립성을 위해
{
"object": "block",
"id": "64b54fee-5bee-4de3-a020-7e9ec08e4855",
"parent": {
"type": "block_id",
"block_id": "3f62d3ce-d035-458a-a3b8-960d41faa19d"
},
"created_time": "2026-07-01T14:43:00.000Z",
"last_edited_time": "2026-07-01T14:43:00.000Z",
"created_by": {
"object": "user",
"id": "2ecd872b-594c-81f7-92e3-000210a8d473"
},
"last_edited_by": {
"object": "user",
"id": "2ecd872b-594c-81f7-92e3-000210a8d473"
},
"has_children": false,
"in_trash": false,
"type": "heading_4",
"heading_4": {
"rich_text": [
{
"type": "text",
"text": {
"content": "리엑트에서 CSS class를 지정할 땐 ",
"link": null
},
"annotations": {
"bold": false,
"italic": false,
"strikethrough": false,
"underline": false,
"code": false,
"color": "default"
},
"plain_text": "리엑트에서 CSS class를 지정할 땐 ",
"href": null
},
{
"type": "text",
"text": {
"content": "ClassName",
"link": null
},
"annotations": {
"bold": false,
"italic": false,
"strikethrough": false,
"underline": false,
"code": true,
"color": "default"
},
"plain_text": "ClassName",
"href": null
},
{
"type": "text",
"text": {
"content": "으로 표기해야 함",
"link": null
},
"annotations": {
"bold": false,
"italic": false,
"strikethrough": false,
"underline": false,
"code": false,
"color": "default"
},
"plain_text": "으로 표기해야 함",
"href": null
}
],
"is_toggleable": false,
"color": "default"
},
"archived": false
}만약 class를 사용하면 자바스크립트 엔진은 Class 문법를 인식함
{
"object": "block",
"id": "c59ccb50-9a81-4cfc-9d8b-bd79c403a52a",
"parent": {
"type": "block_id",
"block_id": "4d242e06-4598-4ab7-80de-a71339d2ed53"
},
"created_time": "2026-07-01T14:43:00.000Z",
"last_edited_time": "2026-07-01T14:43:00.000Z",
"created_by": {
"object": "user",
"id": "2ecd872b-594c-81f7-92e3-000210a8d473"
},
"last_edited_by": {
"object": "user",
"id": "2ecd872b-594c-81f7-92e3-000210a8d473"
},
"has_children": false,
"in_trash": false,
"type": "heading_4",
"heading_4": {
"rich_text": [
{
"type": "text",
"text": {
"content": "JSX에서 Javascript를 쓸 땐 무조건 중괄호()를 사용",
"link": null
},
"annotations": {
"bold": false,
"italic": false,
"strikethrough": false,
"underline": false,
"code": false,
"color": "default"
},
"plain_text": "JSX에서 Javascript를 쓸 땐 무조건 중괄호()를 사용",
"href": null
}
],
"is_toggleable": false,
"color": "default"
},
"archived": false
}중괄호를 안쓰면 일반텍스트로 인식
{
"object": "block",
"id": "288624a9-ee48-4b74-aa31-963d2352994f",
"parent": {
"type": "block_id",
"block_id": "2f82dbc1-fe0e-4f54-aed5-a82bd4b4e5cf"
},
"created_time": "2026-07-01T14:43:00.000Z",
"last_edited_time": "2026-07-01T14:43:00.000Z",
"created_by": {
"object": "user",
"id": "2ecd872b-594c-81f7-92e3-000210a8d473"
},
"last_edited_by": {
"object": "user",
"id": "2ecd872b-594c-81f7-92e3-000210a8d473"
},
"has_children": false,
"in_trash": false,
"type": "heading_4",
"heading_4": {
"rich_text": [
{
"type": "text",
"text": {
"content": "React 엘리먼트가 JSX로 작성되면 ",
"link": null
},
"annotations": {
"bold": false,
"italic": false,
"strikethrough": false,
"underline": false,
"code": false,
"color": "default"
},
"plain_text": "React 엘리먼트가 JSX로 작성되면 ",
"href": null
},
{
"type": "text",
"text": {
"content": "\"대문자\"로 시작",
"link": null
},
"annotations": {
"bold": true,
"italic": false,
"strikethrough": false,
"underline": false,
"code": false,
"color": "default"
},
"plain_text": "\"대문자\"로 시작",
"href": null
}
],
"is_toggleable": false,
"color": "default"
},
"archived": false
}대문자로 작성된 JSX 컴포넌트 = 사용자 정의 컴포넌트
소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식하기 때문
{
"object": "block",
"id": "aee22dee-cb7b-46a7-b26e-3b5e79b4ceee",
"parent": {
"type": "block_id",
"block_id": "19267d29-c0ff-4987-a5e2-280e9e73d3da"
},
"created_time": "2026-07-01T14:43:00.000Z",
"last_edited_time": "2026-07-01T14:43:00.000Z",
"created_by": {
"object": "user",
"id": "2ecd872b-594c-81f7-92e3-000210a8d473"
},
"last_edited_by": {
"object": "user",
"id": "2ecd872b-594c-81f7-92e3-000210a8d473"
},
"has_children": false,
"in_trash": false,
"type": "heading_4",
"heading_4": {
"rich_text": [
{
"type": "text",
"text": {
"content": "조건부 렌더링에는 삼항연산자 사용 ⇒ 조건? true : false",
"link": null
},
"annotations": {
"bold": false,
"italic": false,
"strikethrough": false,
"underline": false,
"code": false,
"color": "default"
},
"plain_text": "조건부 렌더링에는 삼항연산자 사용 ⇒ 조건? true : false",
"href": null
}
],
"is_toggleable": false,
"color": "default"
},
"archived": false
}{
"object": "block",
"id": "297f71a1-3109-4da5-8421-064f53e07f6f",
"parent": {
"type": "block_id",
"block_id": "4e4cfd7b-f3bd-4044-b29b-5ff65aa9482d"
},
"created_time": "2026-07-01T14:43:00.000Z",
"last_edited_time": "2026-07-01T14:43:00.000Z",
"created_by": {
"object": "user",
"id": "2ecd872b-594c-81f7-92e3-000210a8d473"
},
"last_edited_by": {
"object": "user",
"id": "2ecd872b-594c-81f7-92e3-000210a8d473"
},
"has_children": false,
"in_trash": false,
"type": "heading_4",
"heading_4": {
"rich_text": [
{
"type": "text",
"text": {
"content": "리엑트에서 다수의 HTML엘리먼트를 표시할 땐 map() 내장고차함수를 사용",
"link": null
},
"annotations": {
"bold": false,
"italic": false,
"strikethrough": false,
"underline": false,
"code": false,
"color": "default"
},
"plain_text": "리엑트에서 다수의 HTML엘리먼트를 표시할 땐 map() 내장고차함수를 사용",
"href": null
}
],
"is_toggleable": false,
"color": "default"
},
"archived": false
}map를 쓸 땐 무조건 “key"= JSX 속성 을 함께 넣어줘야 한다
key" JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고 표시
컴포넌트
리엑트를 사용하여 만들어진 기능들의 묶음으로 독립적인 기능을 가진 UI의 한 부분
모든 리엑트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있으며 트리구조로 부모-자식, 형제 관계가 형성됨
styled - components