React 기본 개념 정리

// 1) Import the React and ReactDOM libraries
import React from 'react';
import ReactDOM from 'react-dom/client';

// 2) Get a reference to the div with ID root
const el = document.getElementById('root');

// 3) Tell React to take control of that element
const root = ReactDOM.createRoot(el);

// 4) Create a component
function App() {

  return <input style={{ border: '3px solid red' }} type="number" min={5} />;
}

// 5) Show the component on the screen
root.render(<App />);

 

위 기본적인 틀이다.

문자는 “”

숫자는 중괄호 {}

객체를 사용하고자하면, const person = { name: fall }; 라 하면

return ( <h1> {person.name} </h1> );

 

속성을 지정하고자 할 때, camelCase 케이스로 해야한다.

html

• maxlength = “5”

jsx

• return <input maxLength={5} />
• 속성값 혹은 숫자, 변수의 경우는 {} 중괄호를 묶어서 값을 입력한다.
• camelCase로 속성 작성

속성에 boolean 넣는 경우

true

• <input spellcheck=”true” /> →<input spellCheck />
• true 생략 가능

false

• <input spellcheck=”false” /> → <input spellCheck={false} />

class name 지정할 때

• <div class=”divider” /> → <div className=”divider />
• <li class=”item” /> → <li className=”item” />

style inline으로 지정했을 경우

• HTML
• <a style=”text-decoration: ‘none’; padding:’5px’;” />
• JSX - objects
• 속셩명에 -(dash)를 사용할 수 없다.
• <div style={{ textDecoration: ‘none’, paddingTop: ‘5px’ }} />

React import, export

React의 경우 다른 파일에 있는 함수 혹은 파일을 내보내거나 불러올 수 있는데,

아래는 index.js이며, 여기에서 다른 파일의 함수를 사용하고 싶다. 라고 했을 때,

여기서 이제 불러오기를 할 파일을 import를 해주면 된다.

index.js

// 1) Import the React and ReactDOM libraries
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// 2) Get a reference to the div with ID root
const el = document.getElementById('root');

// 3) Tell React to take control of that element
const root = ReactDOM.createRoot(el);

// 4) Show the component on the screen
root.render(<App />);

처음에는 파일 맨 아래에 export를 해준다. 아래와 같이 내보내기 할 파일을 export default <파일명>; 을 적는다.

function App() {

  return <h1>Bye there!</h1>
}

export default App;

이는 일반적인 JS와는 유사한 점도 있지만, 몇가지 차이점이 있다. 차이점은 React가 컴포넌트 기반 구조와 가상 DOM을 사용하고 있기 때문이다.

 

일반 JS와 React의 차이점

1. 컴포넌트 기반 구조
   • React는 모든 UI 요소를 독립적인 컴포넌트로 구성하여 관리할 수 있다. 각 컴포넌트는 JS 함수나, 클래스처럼 작동하며, 자체적으로 관리되는 상태와 UI를 반환한다.
   • React에서는 이러한 컴포넌트들을 import와 export를 통해 서로 불러와서 사용하며, 재사용성 및 유지보수성을 높일 수 있다.
2. 가상 DOM(Virtual DOM)
   • React는 일반 JS와 달리 가상 DOM을 사용하여 DOM조작을 한다. 가상 DOM은 실제 DOM의 복제본 역할을 하며, 상태가 변경될 때마다 가상 DOM에서 먼저 변경 사항을 계산하여, 최소한의 업데이트만 실제 DOM에 적용하여 성능을 높인다.
   • 가상 DOM 덕분에 React는 일반 JS로 DOM을 직접 조작하는 것보다 더 빠르게 화면을 업데이트할 수 있다.
3. JSX(JavaScript XML)
   • React에서는 주로 사용하는 JSX 문법은 일반 JS와 다른 점 중 하나이다.
   • JSX는 JS코드안에서 HTML 태그를 사용하는 문법으로, 직관적인 UI 구성을 가능하도록 돕는다. 일반 JS에서는 HTML을 문자열에 추가하거나, DOM API를 통해 요소를 생성하고 조작해야 하지만, JSX에서는 이를 간단하게 만들어 준다.
   • Babel과 같은 트랜스파일러가 JSX를 일반 JS로 변환하여 React 코드가 브라우저에서 작동 할 수 있도록 돕는다.

 

저번 실습을 React로 간단하게 만들어봤을 때, 확실히 JS보다는 편했다. 각종 요소를 선택하는 것부터, 컴포넌트 만들어서 import, export를 하는데, 파일별로, 기능별로 재사용성이나 유지보수성에 대해 정말 좋은 것 같았다. 

하지만 아직 초반이라, 배울 것도 많고 공부할 게 많은 것 같다. 리액트를 하더라도, 자바스크립트를 놓지 말고 계속 공부해야겠다.