React) 70번째 회고

---

1. React-bootstrap

React-bootstrap은 React 컴포넌트로 재구현된 Bootstrap 라이브러리이다.

이를 통해 React 애플리케이션에서 Bootstrap의 UI 요소를 쉽게 사용할 수 있다.

 

💡 주요 특징

1. React 컴포넌트 기반
2. Bootstrap 스타일링 지원
3. 반응형 디자인
4. 접근성 고려

 

📌 주요 컴포넌트

컴포넌트	설명
Container	레이아웃 컨테이너
Row, Col	그리드 시스템
Button	버튼 컴포넌트
Form	폼 관련 컴포넌트
Modal	모달 다이얼로그

 

💻 사용 예시 코드

import React from 'react';
import { Container, Row, Col, Button } from 'react-bootstrap';

function App() {
  return (
    <Container>
      <Row>
        <Col>
          <h1>Hello, React-Bootstrap!</h1>
          <Button variant="primary">Click me</Button>
        </Col>
      </Row>
    </Container>
  );
}

export default App;

React-bootstrap 사용하기

- 참고 : brgndy

React에 bootstrap 적용하기

- 참고 : dev_0livia.log

---

2. React CORS

CORS(Cross-Origin Resource Sharing)는 다른 출처의 리소스를 공유할 수 있게 하는 메커니즘이다.

React 애플리케이션에서 API 서버와 통신할 때 자주 마주치는 이슈이다.

 

🚀 CORS 해결 방법

방법	설명
서버 측 설정	API 서버에서 CORS 허용
프록시 설정	개발 서버에서 프록시 사용
HTTP-proxy-middleware	더 세밀한 프록시 설정

 

💻 React에서 CORS 처리 예시 코드

// package.json
{
  "proxy": "http://api.example.com"
}

// API 호출 코드
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

[React] 클라이언트에서 CORS 해결하기(http-proxy-middleware)

- 참고 : Steady-Dev

---

3. useState (심화)

useState는 함수형 컴포넌트에서 상태를 관리하는 Hook이다.

 

📌 고급 사용법

기능	설명
함수형 업데이트	이전 상태를 기반으로 업데이트
지연 초기화	초기 상태를 계산하는 함수 전달
객체 상태 관리	복잡한 객체 상태 효율적으로 관리

 

💻 예시 코드

import React, { useState } from 'react';

function AdvancedCounter() {
  // 함수형 업데이트
  const [count, setCount] = useState(0);
  const increment = () => setCount(prevCount => prevCount + 1);

  // 지연 초기화
  const [user, setUser] = useState(() => {
    const savedUser = localStorage.getItem('user');
    return savedUser ? JSON.parse(savedUser) : null;
  });

  // 객체 상태 관리
  const [form, setForm] = useState({ name: '', email: '' });
  const updateForm = (key, value) => {
    setForm(prevForm => ({ ...prevForm, [key]: value }));
  };

  return (
    // JSX
  );
}

useState – React

- 참고 : ko.react.dev

7. useState 를 통해 컴포넌트에서 바뀌는 값 관리하기 · GitBook

- 참고 : react.vlpt.us

---

4. useEffect (심화)

useEffect는 부수 효과를 처리하는 Hook이다.

 

📌 고급 사용법

기능	설명
조건부 실행	의존성 배열을 통한 실행 제어
클린업 함수	부수 효과 정리
비동기 처리	async/await 사용
디바운싱/쓰로틀링	성능 최적화

 

💻 예시 코드

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

function AdvancedEffect() {
  const [data, setData] = useState(null);
  const [search, setSearch] = useState('');

  // 비동기 처리와 클린업
  useEffect(() => {
    let isMounted = true;
    const fetchData = async () => {
      const response = await fetch(`https://api.example.com/data?search=${search}`);
      const result = await response.json();
      if (isMounted) setData(result);
    };
    fetchData();
    return () => { isMounted = false; };
  }, [search]);

  // 디바운싱
  useEffect(() => {
    const debounceTimer = setTimeout(() => {
      console.log('Debounced search:', search);
    }, 300);
    return () => clearTimeout(debounceTimer);
  }, [search]);

  return (
    // JSX
  );
}

 

🚀 실습하며 궁금했던 부분

코드 끝 부분 빈 배열의 의미

    useEffect(() => {
        fetch("/web_react/abc.jsp", {method:'GET'})
        .then(res => {
            if(!res.ok) {
                throw new Error('network response was not ok');  // 실패하면 error message
            }
            return res.json(); // 성공하면 json으로 받아준다.
        })
        .then(
            (result) => {
                setIsLoaded(true);
                setItems(result.items); // 8번 줄의 items X. json의 items값임
            },
            (error) => {
                setIsLoaded(true);
                setError(error); // setEroor는 23번줄의 error값을 가져감
            }
        )
    }, []);

 

이 코드에서 useEffect Hook의 끝 부분에 있는 빈 배열 []은 의존성 배열(dependency array)을 나타낸다.
이 빈 배열의 의미는 다음과 같다.

1. 컴포넌트가 처음 마운트될 때만 useEffect 내부의 코드가 실행된다.
2. 이후 리렌더링 시에는 이 효과가 다시 실행되지 않는다.

즉, 이 useEffect는 컴포넌트의 생명주기 중 "마운트" 단계에서만 실행되는 것을 의미한다.
이는 주로 초기 데이터 불러오기나 구독 설정 등 한 번만 실행되어야 하는 작업에 사용된다.

 

만약 이 배열에 어떤 값들이 포함되어 있다면, 그 값들이 변경될 때마다 useEffect 내부의 코드가 다시 실행된다.
하지만 빈 배열 []을 사용하면, 어떤 값의 변화에도 반응하지 않고 오직 컴포넌트가 처음 렌더링될 때만 실행된다.

 

Using the Effect Hook – React

- 참고 : ko.legacy.reactjs.org

[React] 7. React hooks[2] - useEffect란?

- 참고 : goddaehee