React

React는 UI를 구축하기 위한 자바스크립트 라이브러리로,
컴포넌트를 기반으로 하는 방식으로 사용자 인터페이스를 구성합니다.

1. 컴포넌트 (Component)

=> React는 컴포넌트 단위로 UI를 구성합니다. 컴포넌트는 독립적이고 재사용 가능한 UI 요소입니다.

함수형 컴포넌트: 가장 간단한 형태의 컴포넌트로, 함수로 정의되며 JSX를 반환합니다.

function Hello() {
  return <h1>Hello, World!</h1>;
}

클래스형 컴포넌트: 클래스 기반의 컴포넌트로, state와 생명주기 메서드를 사용할 수 있습니다.

class Hello extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

2. JSX (JavaScript XML)

JSX는 자바스크립트 내에서 HTML과 유사한 구문을 사용할 수 있게 해주는 문법입니다. 컴포넌트의 UI 구조를 정의하는 데 사용됩니다.

3. Props

Props는 컴포넌트 간에 데이터를 전달할 때 사용하는 읽기 전용 속성입니다. 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용합니다.

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

4. State

State는 컴포넌트 내부에서 관리하는 데이터입니다. 컴포넌트의 동적인 동작을 관리하는 데 사용됩니다. useState 훅을 사용하여 함수형 컴포넌트에서도 state를 사용할 수 있습니다.

5. 이벤트 처리

React에서는 이벤트를 처리할 때 일반 HTML과 다르게 camelCase를 사용합니다. 예를 들어, onClick 등.

6. 생명주기 메서드

클래스형 컴포넌트에서 컴포넌트의 생명주기 동안 특정 작업을 수행할 수 있는 메서드입니다.
Ex) componentDidMount, componentDidUpdate, componentWillUnmount

• componentDidMount: 컴포넌트가 처음으로 렌더링되고 나서 호출됩니다. 주로 API 호출, DOM 조작 등이 필요할 때 사용됩니다.

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('Component did mount');
    // API 호출 등
  }

  render() {
    return <div>My Component</div>;
  }
}

• componentDidUpdate: 컴포넌트가 업데이트된 후에 호출됩니다. 이전 상태나 이전 props와 비교하여 필요한 작업을 수행할 수 있습니다.

class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (this.props.value !== prevProps.value) {
      console.log('Component did update');
      // 값이 변경되었을 때 처리
    }
  }

  render() {
    return <div>My Component</div>;
  }
}

• componentWillUnmount: 컴포넌트가 DOM에서 제거되기 직전에 호출됩니다. 타이머 해제, 구독 해제 등의 정리 작업에 사용됩니다.

class MyComponent extends React.Component {
  componentWillUnmount() {
    console.log('Component will unmount');
    // 정리 작업 수행
  }

  render() {
    return <div>My Component</div>;
  }
}

7. 훅 (Hooks)

React 훅은 함수형 컴포넌트에서 상태(state)와 다른 React 기능을 사용할 수 있게 해주는 함수들입니다.

1. useState

역할: 함수형 컴포넌트에서 상태(state)를 선언하고 관리할 수 있게 해줍니다.
사용법: useState는 상태의 현재 값과 이를 업데이트할 수 있는 함수를 반환합니다.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

2. useEffect

역할: 사이드 이펙트를 처리하는 데 사용됩니다. 데이터 가져오기, 구독 설정, DOM 직접 조작 등을 할 수 있습니다.
[]안에 변수값이 변경되면 effect실행
사용법: 첫 번째 인자로 실행할 함수, 두 번째 인자로 의존성 배열을 받습니다.

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log('Component mounted or updated');

    return () => {
      console.log('Cleanup on component unmount');
    };
  }, []); // 빈 배열을 넘기면 마운트 시에만 실행

  return <div>My Component</div>;
}

3. useContext

역할: Context API를 사용하여 컴포넌트 트리 전체에서 전역 상태를 쉽게 공유할 수 있게 해줍니다.
사용법: useContext는 Context 객체를 인자로 받아 해당 Context의 현재 값을 반환합니다.

import React, { useContext } from 'react';

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

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Button</button>;
}

4. useReducer

역할: 상태와 상태 변경 로직을 분리하여 복잡한 상태 관리를 할 수 있게 해줍니다. useState의 대안으로, 특히 여러 하위 상태가 있을 때 유용합니다.
사용법: 리듀서 함수와 초기 상태를 인자로 받아 상태와 디스패치 함수를 반환합니다.

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

5. useCallback

역할: 메모이제이션된 콜백 함수를 반환합니다. 자식 컴포넌트에 전달되는 콜백 함수를 메모이제이션하여 불필요한 렌더링을 방지할 수 있습니다.
사용법: 생성된 함수는 의존성 배열의 값이 변경될 때만 재생성됩니다.

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

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

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return <button onClick={handleClick}>Increment</button>;
}

6. useMemo

역할: 메모이제이션된 값을 반환합니다. 비용이 큰 계산의 결과를 메모이제이션하여 성능을 최적화할 수 있습니다.
사용법: 계산된 값은 의존성 배열의 값이 변경될 때만 재계산됩니다.

import React, { useMemo } from 'react';

function MyComponent({ items }) {
  const total = useMemo(() => items.reduce((sum, item) => sum + item.price, 0), [items]);

  return <div>Total: {total}</div>;
}

7. useRef

역할: 변경 가능한 ref 객체를 생성하여 DOM 요소나 컴포넌트 인스턴스에 접근할 수 있게 해줍니다. 유지되고 있는 값이나 DOM 조작이 필요할 때 사용됩니다.
사용법: ref 객체의 .current 속성을 통해 참조된 값을 읽거나 설정할 수 있습니다.

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

function FocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} type="text" />;
}

8. useImperativeHandle

역할: 부모 컴포넌트가 자식 컴포넌트의 내부 메서드나 프로퍼티에 접근할 수 있도록 합니다. 주로 forwardRef와 함께 사용됩니다.
사용법: ref 객체에 대한 사용자 정의 인스턴스 값을 설정할 수 있습니다.

import React, { useImperativeHandle, useRef, forwardRef } from 'react';

const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} type="text" />;
});

function Parent() {
  const inputRef = useRef();

  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus Input</button>
    </div>
  );
}

9. useLayoutEffect

역할: DOM이 변경된 후에 동기적으로 실행됩니다. useEffect와 비슷하지만, 레이아웃을 읽고 변경하는 작업에 적합합니다. useEffect보다 먼저 실행됩니다.
사용법: 화면에 렌더링되기 전에 DOM 조작이 필요한 경우 사용됩니다.

import React, { useLayoutEffect, useRef } from 'react';

function LayoutComponent() {
  const divRef = useRef();

  useLayoutEffect(() => {
    console.log(divRef.current.getBoundingClientRect());
  }, []);

  return <div ref={divRef}>LayoutComponent</div>;
}

10. useDebugValue

역할: React DevTools에서 훅의 디버그 값을 표시하는 데 사용됩니다. 커스텀 훅에서 주로 사용됩니다.
사용법: 디버그 정보 제공을 위한 값을 설정합니다.

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

function useCustomHook() {
  const [value, setValue] = useState('Hello');
  useDebugValue(value);
  return [value, setValue];
}

function MyComponent() {
  const [value] = useCustomHook();
  return <div>{value}</div>;
}