React basic manual

리액트 필수 매뉴얼 모음

---

---

Component

컴포넌트는 React의 핵심 개념으로, 웹 페이지의 사용자 인터페이스(UI)를 재사용 가능한 독립적인 단위로 분할하는 역할을 수행합니다. 

이는 마치 레고 블록을 조립하여 복잡한 구조물을 완성하는 과정과 유사합니다. 

현대 React 개발에서는 함수형 컴포넌트의 활용이 보편적입니다.

// MyComponent라는 함수형 컴포넌트
function MyComponent() {
  return <h1>Hello, React!</h1>;
}

jsx

---

---

JSX (JavaScript XML)

JSX는 JavaScript 내부에 HTML과 유사한 구문을 작성할 수 있도록 지원하는 JavaScript의 확장 문법입니다. 이는 실제 HTML이 아닌, React 엘리먼트를 생성하기 위한 목적이며, 사용자 인터페이스의 구조를 더욱 직관적으로 표현하는 데 기여합니다. 

const element = <h1>Hello, JSX!</h1>; // JavaScript 변수에 HTML과 유사한 문법을 활용

jsx

---

---

Properties

Props(Properties)는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 메커니즘입니다. 

HTML 태그의 속성과 유사한 형태로 사용되며, 자식 컴포넌트에서는 전달받은 props를 읽어 활용합니다. 

전달된 props는 자식 컴포넌트 내부에서 변경 불가능한(읽기 전용) 특성을 지닙니다. 

// 부모 컴포넌트에서 name이라는 prop을 전달
<Greeting name="World" />

// Greeting 자식 컴포넌트
function Greeting(props) {
  return <p>Hello, {props.name}!</p>; // props 객체에서 name 속성을 사용
}

jsx

---

---

useState

State(상태)는 컴포넌트 내부에서 시간이 경과함에 따라 변화할 수 있는 데이터를 의미합니다. 

이는 카운터 애플리케이션의 현재 값 또는 목록의 항목 등 동적인 데이터를 관리하는 데 사용됩니다. 

useState 훅을 활용하여 상태를 선언하고 갱신하며, 상태의 변경은 React가 사용자 인터페이스를 자동으로 재렌더링하도록 트리거합니다. 

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // count: 현재 상태값, setCount: 상태를 변경하는 함수

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

jsx

---

---

useEffect

useEffect 훅은 컴포넌트가 렌더링된 이후 특정 작업을 수행해야 할 때 사용됩니다. 데이터 페칭(fetching), 구독 설정, DOM 수동 조작과 같은 '부수 효과'를 처리하는 데 효과적입니다. 

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 컴포넌트가 처음 마운트(렌더링)된 후 한 번만 실행됩니다.
    // 이는 두 번째 인자로 빈 배열([])을 전달했기 때문입니다.
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => setData(result));
  }, []); // 이 배열 내부의 값이 변경될 경우에만 effect가 재실행됩니다.

  return (
    <div>
      {data ? <p>데이터: {data.message}</p> : <p>데이터를 불러오는 중입니다...</p>}
    </div>
  );
}

jsx

---

---

Conditional Rendering

조건부 렌더링은 특정 조건에 따라 다른 사용자 인터페이스 요소를 표시할 필요가 있을 때 사용됩니다. 

JavaScript의 if 문 또는 삼항 연산자 (조건 ? 참일_경우_값 : 거짓일_경우_값)를 활용하여 구현할 수 있습니다.

function UserStatus({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>환영합니다!</p> : <p>로그인해주십시오.</p>}
    </div>
  );
}

jsx

---

---

map

여러 데이터를 목록 형태로 출력할 때 JavaScript의 map() 메서드가 일반적으로 활용됩니다. 

배열의 각 항목에 대해 컴포넌트를 생성하며, 이때 각 항목에 고유한 key prop을 부여하는 것이 필수적입니다.

function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li> // key prop은 고유한 값을 가져야 합니다.
      ))}
    </ul>
  );
}

jsx

---

---

Event Handling

이벤트 핸들링은 버튼 클릭, 입력 필드 변경 등 사용자 상호작용에 반응하는 기능을 구현합니다. 

HTML의 이벤트 처리와 유사하나, React에서는 이벤트 핸들러 함수를 JSX 요소에 직접 전달하며, 이벤트 이름은 카멜케이스(camelCase)를 사용합니다.

function ButtonClicker() {
  const handleClick = () => {
    alert('버튼이 클릭되었습니다.');
  };

  return (
    <button onClick={handleClick}>클릭하십시오</button>
  );
}

jsx

---