리액트 주요 요소 정리

React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다.

React를 쉽게 이해하기 위해 다음과 같은 개념과 방법을 따라가면 도움이 됩니다.

1. 컴포넌트(Component)

React의 기본 단위는 컴포넌트입니다.

컴포넌트는 독립적이고 재사용 가능한 UI 요소를 정의합니다.

컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉩니다.

함수형 컴포넌트

import React from 'react';

const MyComponent = () => {
  return <div>Hello, World!</div>;
};

export default MyComponent;

클래스형 컴포넌트

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

export default MyComponent;

2. JSX

JSX는 JavaScript XML의 약자로, JavaScript 코드 안에서 HTML과 유사한 구문을 사용할 수 있게 해줍니다.

JSX는 React.createElement()를 호출하는 방식으로 구현 됩니다.

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

3. 상태(State)와 속성(Props)

• 상태(State): 컴포넌트 내부에서 관리되는 데이터입니다. 상태가 변경되면 컴포넌트는 다시 렌더링됩니다.
• 속성(Props): 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다. 속성은 읽기 전용입니다.

상태 예시

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

속성 예시

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

// 사용 예시
<Greeting name="Alice" />

4. 이벤트 처리

React에서는 이벤트를 처리하기 위해 CamelCase로 이벤트 핸들러를 정의합니다.

const Button = () => {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <button onClick={handleClick}>Click me</button>;
};

5. 조건부 렌더링

조건부 렌더링을 통해 특정 조건에 따라 다른 UI를 렌더링할 수 있습니다.

const Greeting = ({ isLoggedIn }) => {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign in.</h1>;
  }
};

6. 리스트 렌더링

리스트를 렌더링할 때는 map() 함수를 사용하며, 각 항목에는 고유한 key 속성을 부여해야 합니다.

const NumberList = ({ numbers }) => {
  return (
    <ul>
      {numbers.map((number) => (
        <li key={number.toString()}>{number}</li>
      ))}
    </ul>
  );
};

 

7. 리액트 기본 문법

계획

1. 리액트와 리액트 돔을 임포트합니다.
2. 함수형 컴포넌트를 생성합니다.
3. JSX를 사용하여 컴포넌트의 UI를 정의합니다.
4. 컴포넌트를 DOM에 렌더링합니다.

코드

// 1. 리액트와 리액트 돔을 임포트합니다.
import React from 'react';
import ReactDOM from 'react-dom';

// 2. 함수형 컴포넌트를 생성합니다.
function App() {
  // 3. JSX를 사용하여 컴포넌트의 UI를 정의합니다.
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is a simple React component.</p>
    </div>
  );
}

// 4. 컴포넌트를 DOM에 렌더링합니다.
ReactDOM.render(<App />, document.getElementById('root'));

이 코드는 기본적인 리액트 컴포넌트를 생성하고, 이를 DOM에 렌더링하는 예제입니다.

App이라는 함수형 컴포넌트를 만들고, JSX를 사용하여 UI를 정의한 후, ReactDOM.render를 사용하여 이를 root라는 ID를 가진 DOM 요소에 렌더링합니다.

 

- 끝 -