0. 리엑트란?
리엑트는 메타플랫폼즈(구 페이스북)에서 만든 오픈소스 자바스크립트 라이브러리 입니다.
쉽게 말해서 자바스크립트에 JSX 라는 문법을 추가하여 UI를 더 쉽고 선언적으로 구성할 수 있게 만든 것입니다. 선언적은 무엇을 어떻게 할지 절차적으로 만드는 명령형과는 정 반대입니다. 즉, 이 상태라면, 어떻게 해라 처럼 선언하는 것입니다.
예를 들어 설명하면, 개발자가 데이터 상태에 따라 원하는 것을 보여줘 라고 작성해 놓으면, 사용자가 웹사이트를 이용하면서 상태를 바꿀 경우(클릭, 입력 등등) 그에 맞는 UI 화면으로 바꿔 줄수 있게 만드는 것입니다.
1. 자바 스크립트와의 차이
| 목적 | 로직 처리, 데이터 조작 | UI 구성, 컴포넌트 중심 개발 |
| 문법 | 순수 JS 문법만 사용 | HTML 비슷한 JSX + JS 혼합 |
| 렌더링 | DOM 직접 조작 (document.createElement) | JSX로 선언형 UI 구성 |
| HTML 작성 | 문자열로 조작하거나 innerHTML | JSX 문법으로 직접 태그 사용 |
| 스타일 | element.classList.add() 등 | className="..." |
| 조건문 | if, switch | JSX 안에서는 삼항연산자, && |
| 반복문 | for, while | JSX 안에서는 .map() |
| 함수 호출 | 일반 함수, 이벤트 직접 연결 | onClick={함수}로 이벤트 처리 |
2. 주요 문법 차이
(1) 클래스 - JS : class="box" / React : className="box" (그냥 클래스는 예약어라 Name을 붙였습니다.)
(2) 조건문 - JS : class=if (loggedIn) { console.log("환영합니다");} / React : {loggedIn && <p>환영합니다</p>}
(3) 반복문 - JS : for (let i = 0; i < list.length; i++) {console.log(list[i]);}
React : <ul> {list.map((item) => <li key={item}>{item}</li>)} </ul>
(4) 데이터 전달:
부모 컴포넌트가 자식에세 직접 데이터를 전달하는 문법 입니다. 함수의 매개변수 처럼 사용하시면 됩니다.
4. 결론:
리엑트는 자바스크립트랑 조금 다른 문법 체계를 가져서 처음에는 조금 어색 하겠지만, 현업에서는 리엑터를 사용하는 비율이 압도적으로 높습니다.
특히나 우리가 처음 배운것 처럼, HTML, CSS, JS 로 나누어서 사용하는 일은 거의 없습니다. 대신에 이 React로 하나의 컴포넌트 안에 구조, 스타일, 동작을 모두 통합해 개발 합니다.