리액트(react.js) 기본 문법 완벽 정리

리액트(React) 기초 문법 완벽 정리

React(리액트)는 페이스북에서 개발한 UI 라이브러리로, 동적인 웹 애플리케이션을 효율적으로 개발할 수 있도록 도와줍니다. 단순한 HTML, CSS, JavaScript를 이용하는 것보다 더 모듈화된 방식으로 컴포넌트를 관리할 수 있으며, 가상 DOM을 활용해 성능을 최적화할 수 있습니다. 이번 글에서는 리액트의 기본 문법을 체계적으로 정리하여 2000자 이상으로 자세히 설명하겠습니다.

---

 

 

1. 리액트의 기본 개념

1.1 리액트의 특징

1. 컴포넌트 기반 구조
   • 리액트는 작은 컴포넌트(Component) 단위로 UI를 쪼개어 개발할 수 있습니다.
   • 재사용이 가능하여 유지보수가 용이합니다.
2. 가상 DOM(Virtual DOM) 사용
   • 기존의 HTML DOM을 직접 조작하는 것이 아니라, 메모리 상에서 가상의 DOM을 관리하여 변경 사항만 실제 DOM에 적용합니다.
   • 이를 통해 성능을 최적화할 수 있습니다.
3. 단방향 데이터 흐름(One-Way Data Binding)
   • 리액트는 데이터가 위에서 아래(부모 → 자식)로만 흐르는 구조를 가집니다.
   • 데이터의 일관성을 유지하고 디버깅을 용이하게 합니다.
4. JSX(JavaScript XML) 문법 지원
   • JSX는 HTML과 비슷한 문법을 가진 JavaScript 확장 문법입니다.
   • JSX를 사용하면 UI를 더 직관적으로 표현할 수 있습니다.

---

 

 

2. 리액트 환경 설정

리액트를 사용하려면 프로젝트를 먼저 생성해야 합니다. **Create React App (CRA)**를 이용하면 빠르게 개발 환경을 설정할 수 있습니다.

npx create-react-app my-app
cd my-app
npm start

이제 개발 서버가 실행되며 기본적인 리액트 프로젝트 구조가 생성됩니다.

---

3. JSX 문법

3.1 JSX란?

JSX는 JavaScript 코드 안에서 HTML을 작성할 수 있도록 도와주는 문법입니다. 일반적으로 다음과 같은 형태로 사용됩니다.

const element = <h1>Hello, React!</h1>;

 

 

3.2 JSX의 규칙

1. 반드시 하나의 부모 요소로 감싸야 한다.

   return (
       <div>
           <h1>안녕하세요</h1>
           <p>리액트 공부 중입니다.</p>
       </div>
   );
   

2. JSX 내부에서 JavaScript 표현식 사용 가능

   const name = "홍길동";
   return <h1>안녕하세요, {name}님!</h1>;
   

3. 클래스 대신 className 사용

   return <div className="container">내용</div>;
   

4. 태그는 반드시 닫아야 한다.

   return <input type="text" />;
   

5. 조건부 렌더링 (&&, ? : 연산자 활용)

   const isLogin = true;
   return <h1>{isLogin ? "환영합니다!" : "로그인하세요."}</h1>;
   

---

 

 

4. 컴포넌트(Component)

4.1 컴포넌트의 종류

1. 함수형 컴포넌트 (Functional Component)

   function Welcome() {
       return <h1>안녕하세요!</h1>;
   }
   

2. 클래스형 컴포넌트 (Class Component)

   class Welcome extends React.Component {
       render() {
           return <h1>안녕하세요!</h1>;
       }
   }
   

최근에는 함수형 컴포넌트와 React Hooks를 사용하는 방식이 주로 쓰입니다.

4.2 Props (속성)

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용합니다.

function Greeting(props) {
   return <h1>안녕하세요, {props.name}님!</h1>;
}

function App() {
   return <Greeting name="홍길동" />;
}

4.3 State (상태)

State는 컴포넌트 내부에서 관리하는 값으로, 변경될 때마다 컴포넌트가 다시 렌더링됩니다.

import { useState } from "react";

function Counter() {
   const [count, setCount] = useState(0);

   return (
       <div>
           <p>현재 카운트: {count}</p>
           <button onClick={() => setCount(count + 1)}>증가</button>
       </div>
   );
}

---

 

 

5. 이벤트 처리

리액트에서 이벤트를 처리하는 방법은 다음과 같습니다.

function Button() {
   const handleClick = () => {
       alert("버튼 클릭됨!");
   };

   return <button onClick={handleClick}>클릭</button>;
}

• onClick={함수명} 형태로 이벤트를 설정합니다.
• this 바인딩이 필요하지 않습니다 (함수형 컴포넌트에서는 useState 사용).

---

6. 리스트 렌더링과 Key

리액트에서 배열 데이터를 렌더링할 때 map()을 사용합니다.

const items = ["사과", "바나나", "포도"];

function ItemList() {
   return (
       <ul>
           {items.map((item, index) => (
               <li key={index}>{item}</li>
           ))}
       </ul>
   );
}

Key의 역할

• Key는 리스트의 각 항목을 구별하는 역할을 합니다.
• 동일한 Key가 있으면 성능 최적화가 어려워지므로 항목이 유일한 경우, 인덱스보다 고유한 ID를 사용하는 것이 좋습니다.

---

 

 

7. React Hooks

React Hooks는 함수형 컴포넌트에서도 상태와 생명주기 기능을 사용할 수 있도록 도와줍니다.

7.1 useState (상태 관리)

const [count, setCount] = useState(0);

7.2 useEffect (사이드 이펙트 관리)

useEffect(() => {
   console.log("컴포넌트가 렌더링됨!");
}, []);

7.3 useRef (DOM 접근)

const inputRef = useRef(null);
<input ref={inputRef} />;

---

 

 

8. 리액트 라우터 (React Router)

리액트에서 페이지 이동을 처리하려면 react-router-dom을 사용해야 합니다.

설치:

npm install react-router-dom

사용:

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

function App() {
   return (
       <Router>
           <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/about" element={<About />} />
           </Routes>
       </Router>
   );
}

---