index.html 파일엔 페이지 역할을 하는 HTML 요소가 포함되어있다.
리액트에선 index.html 파일에 내용이 없고
<body> 섹션 끝에 <div id="root"> 만 포함되어있다.
왜냐하면 리액트 앱에서는 리액트가 사용자 인터페이스 전체를 렌더링하기 때문이다.
본격적인 내용은 index.js 파일부터 시작한다고 보면된다.
우리가 index.js 파일에서 document.getElementById("root")를 선택해서
<div id="root">가 선택되면 리액트가 이 <div>와 그 내용을 제어하기 시작한다.
그때 중요한게 App.js파일인데, App.js 파일은 말하자면 핵심 코드가 담겨 있는 파일이다.
파일안에 App() 이라는 함수가 있는데. 내용에 특이한 점이 있다.
HTML 코드가 잔뜩 들어있는 점이다. 이건 자바스크립트의 기본 기능이 아니다.
기본적으로 자바스크립트 파일에 HTML 코드를 추가하면 오류가 난다.
기본적으로 js파일에 html 코드는 지원이 안된다.
그러나 리액트 프로젝트에선 가능하다.
background에서 전체 프로젝트가 설정된 방식 덕분이다.
리액트의 핵심 기능중 하나가 HTML과 자바스크립트 코드를 섞어 쓰는것이다.
자바스크립트 파일 하나에 다 있게 되는것이다.
바닐라 자바스크립트에 코드를 짜던 방식이 아닌
JS파일 아네 HTML 코드가 있고 그 HTML 코드안에 동적 요소가 들어있다.
동적 코드가 HTML 코드에 섞여있는것 이다.
<ul>이 자바스크립트에 HTML로 있고 동적 내용이 추가 될 수 있다.
클릭된 버튼에 따라 배열에서 <ul>에 배열에서 중첩 배열을 불러오는 동작이 가능하다.
<ul>
{content[activeContentIndex].map((item)=>(
<li key={item}>{item}</li>
))}
</ul>
그리고 중첩 배열의 원소도 함께 가져온다. 문자열로 된 원소들이 List 원소로 변환된다.
이것도 바닐라 자바스크립트에선 불가능하지만 리액트에선 가능하다.
모든 리스트 원소가 이런식으로 <ul> 리스트에 추가된다.
이 activeConetntIndex는 useState()라는 리액트 함수로 생성하고 제어하는 변수같은거다.
useState()로 리액트가 관리하는 동적 변수를 생성하면
setActiveCContentIndex()로 그 변수를 업데이트 할 수 있다.
const [activeContentIndex, setActiveContentIndex] = useState([]);
이 activeContentIndex 변수 값이 변하면 현재 UI에 영향을 준다.
왜냐하면 리액트가 이 변수를 감시하여 값이 변할때마다 HTML 코드를 살피고
조건을 점검해 코드를 전부 실행한 다음, 그렇게 생성되는 UI가 이전에 렌더링된것과
다른지 확인하기 때문이다.
그 후 다른 UI가 필요하면 리액트가 UI를 업데이트하고 이 과정을 리액트가 전부 알아서 해준다
왜냐하면 리액트로 작업할때는 코드를 선언형으로 작성하기 때문이다
즉, 목표로하는 UI 상태를 정의할 뿐 거쳐야 할 단계는 정의하지 않는다.
리액트가 과정을 알아서 파악해 필요한 단계를 수행한다.
따라서 리액트 코드는 선언형으로 작성해야 한다. 이 점을 반드시 이해하고 명심해야 한다.
그게 리액트의 작동원리다.
반면 바닐라 자바스크립트는 선언형이 아닌 명령형으로 작성된다.
다시 말해 목표가 아니라 거쳐야할 단계를 정의한다.
단계를 정의하는건 훨씬 번거롭고 어렵다.
이건 아주 기초적이고 간단한 예시인데도 원하는 동작을 수행하기 까지 여러 단계가 필요하다.
도중에 단계를 빼먹거나 오류가 끼어들기도 쉽다.
코드를 업데이트해 4번째 버튼을 다루는것도 쓸데없이 복잡해 질 수있다.
이렇게 단계별 명령을 정의했기 때문에 명령형 방식이라고 부른것이다.
반면 리액트는 군더더기 없고, 작성할 코드가 비교적 짧다.
게다가 UI 업데이트도 알아서 해준다. 리액트 내부에서 자바스크립트로 UI를 업데이트 하는것이다.
우리가 조건과 목표 상태, 상태 변경 조건만 정의하면 나머지는 리액트가 알아서 해준다
'React > React 완벽 가이드' 카테고리의 다른 글
| 3. Components | 코드 재사용 (0) | 2024.04.08 |
|---|---|
| 1. React는 무엇이고, 왜 사용할까? (Virtual DOM) (0) | 2024.04.02 |