[React] 리액트 기본 용어 정리

📌 리액트 기본 용어 정리

1️⃣ 컴포넌트 (Component)

• UI를 구성하는 독립적인 블록.
• 함수형 컴포넌트와 클래스형 컴포넌트가 있지만, 최근에는 함수형 컴포넌트가 주로 사용됨.

  function Button() {
    return <button>Click me</button>;
  }
  

2️⃣ 프롭스 (Props, Properties)

• 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터.

  function Greeting(props) {
    return <h1>Hello, {props.name}!</h1>;
  }
  

3️⃣ 상태 (State)

• 컴포넌트 내부에서 관리하는 동적인 데이터.

  import { useState } from 'react';
  
  function Counter() {
    const [count, setCount] = useState(0);
    
    return (
      <div>
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increase</button>
      </div>
    );
  }
  

4️⃣ 훅 (Hooks)

• 함수형 컴포넌트에서 상태 관리나 라이프사이클 기능을 사용하기 위한 기능.
  • useState → 상태 관리
  • useEffect → 사이드 이펙트 관리
  • useContext → 전역 상태 공유

5️⃣ 이펙트 (Effect)

• useEffect 훅을 사용해 컴포넌트가 렌더링될 때 실행할 코드 정의.

  import { useEffect } from 'react';
  
  function Example() {
    useEffect(() => {
      console.log("컴포넌트가 마운트될 때 실행됨");
    }, []);
  
    return <div>Example</div>;
  }
  

6️⃣ JSX (JavaScript XML)

• 리액트에서 HTML과 비슷한 문법을 사용하기 위한 문법 확장.

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

7️⃣ 렌더링 (Rendering)

• 컴포넌트가 화면에 출력되는 과정.
  • 초기 렌더링: 처음 화면을 그릴 때.
  • 리렌더링: 상태(state)나 프롭스(props)가 변경될 때 다시 그림.

8️⃣ 컨텍스트 (Context)

• 전역적으로 데이터를 관리하고 전달하는 기능.

  const ThemeContext = React.createContext('light');
  

9️⃣ 리덕스 (Redux)

• 상태 관리를 위한 라이브러리. (규모가 커지면 사용)
• useReducer와 Context API로도 대체 가능.

🔟 라우팅 (Routing)

• react-router-dom을 사용해 페이지 이동을 관리.

  import { BrowserRouter, Route, Routes } from 'react-router-dom';
  
  function App() {
    return (
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </BrowserRouter>
    );
  }