DOTI Project

PHP와 React를 함께 사용하는 간단한 예제를 소개해드리겠습니다.기존 PHP 기반 웹사이트에 React를 부분적으로 도입하고 싶은 분들께 도움이 될 내용입니다.목표PHP 백엔드에서 JSON 데이터를 제공합니다.React 프론트엔드가 Ajax(Fetch)를 통해 데이터를 받아 목록으로 출력합니다.1. PHP API 만들기우선 PHP에서 JSON 데이터를 반환하는 간단한 API를 만듭니다./api/data.php 파일에 아래와 같은 코드를 작성해주세요. 1, 'name' => '사과'], ['id' => 2, 'name' => '바나나'], ['id' => 3, 'name' => '포도']];echo json_encode($data);이제 /api/data.php 주소로 접속하면 아래와 같은 JSON..

React 프로젝트를 운영하다 보면 API 주소나 비밀 키와 같은 설정 값을 코드에 직접 넣는 경우가 많습니다. 하지만 이렇게 하면 보안이 취약해지고 유지 관리도 어려워집니다. 이를 해결하기 위한 방법이 바로 .env 환경변수입니다.1. 환경변수란?환경변수(Environment Variables)는 애플리케이션이 실행될 때 외부에서 주입되는 설정 값입니다. React에서는 .env 파일을 이용해 환경별 설정 값을 쉽게 관리할 수 있습니다.2. 기본 사용법프로젝트 루트에 .env 파일 생성REACT_APP_ 접두사를 붙여 변수 선언// .envREACT_APP_API_URL=https://api.example.comREACT_APP_GOOGLE_KEY=abcdefg12345변수를 가져와 사용하려면 proc..

React 애플리케이션이 커질수록 초기 로딩 시간이 길어집니다. 이런 문제를 해결하기 위해 코드 분할(Code Splitting)이 필요하며, React는 React.lazy와 Suspense를 통해 이를 간단히 구현할 수 있게 해줍니다.1. 코드 분할이란?코드 분할이란, 앱을 여러 개의 작은 번들로 나누어 필요할 때만 로딩하는 기술입니다. 이렇게 하면 초기 로딩 속도가 빨라지고 사용자 경험이 향상됩니다.2. React.lazy 사용법React.lazy()는 동적으로 컴포넌트를 불러올 수 있게 해줍니다.// LazyComponent.jsexport default function LazyComponent() { return 나는 나중에 로딩됨!;}// App.jsimport React, { Suspens..

React 개발자라면 React Developer Tools(DevTools)을 반드시 익혀야 합니다. 이 도구를 잘 활용하면 컴포넌트 트리 탐색부터 렌더링 성능 분석까지 효율적으로 할 수 있습니다.1. React DevTools 설치하기React DevTools는 Chrome 또는 Firefox 브라우저 확장 프로그램으로 설치할 수 있습니다. 설치 후에는 개발자 도구(F12) 내의 React 탭에서 사용 가능합니다.2. Components 탭Components 탭에서는 전체 컴포넌트 트리 구조를 확인할 수 있습니다. 각 컴포넌트의 props, state, hooks 값 등을 실시간으로 확인하고 수정도 가능합니다.props/state 실시간 확인: 원하는 컴포넌트를 클릭하면 오른쪽 패널에 상세 정보가 표..

복잡한 상태 관리를 하려면 단순한 useState만으로는 한계가 있습니다. 이럴 때 useReducer와 Context API를 결합하면 유지보수가 쉽고 구조화된 전역 상태 관리가 가능합니다.1. 왜 useReducer + Context인가?useReducer는 상태 업데이트 로직을 하나의 함수로 관리할 수 있어 복잡한 상태 전이에 적합합니다. Context API는 이 상태를 전역으로 공유할 수 있게 해줍니다. 이 둘을 결합하면 리덕스 없이도 유사한 전역 상태 관리를 구현할 수 있습니다.2. 기본 구조 설계// state.jsimport { createContext, useReducer, useContext } from 'react';const initialState = { count: 0 };func..

React 앱을 개발하다 보면 컴포넌트가 불필요하게 렌더링되는 상황을 마주하게 됩니다. 이런 경우 useMemo와 useCallback 훅을 사용해 성능을 최적화할 수 있습니다.1. useMemo란?useMemo는 계산 비용이 높은 값을 메모이제이션하여, 의존성이 변경될 때만 다시 계산하도록 도와줍니다.import { useMemo } from 'react';const expensiveValue = useMemo(() => { return computeHeavyTask(input);}, [input]);위 코드에서 computeHeavyTask는 input이 바뀔 때만 실행되고, 그 외에는 캐시된 결과를 반환합니다.2. useCallback이란?useCallback은 함수를 메모이제이션하는 데 사용됩니..

React를 사용하다 보면 비슷한 로직이 여러 컴포넌트에 반복될 때가 많습니다. 이럴 때 커스텀 훅(Custom Hook)을 사용하면 코드의 중복을 줄이고, 더욱 깔끔하게 관리할 수 있습니다.1. 커스텀 훅이란?커스텀 훅은 use로 시작하는 JavaScript 함수로, React의 내장 훅(useState, useEffect 등)을 활용해 만든 재사용 가능한 기능입니다.2. 간단한 예시: useToggle 훅import { useState } from 'react';function useToggle(initialValue = false) { const [value, setValue] = useState(initialValue); const toggle = () => setValue(prev => !p..

React 앱이 커지면서 여러 컴포넌트 간에 상태를 공유해야 할 경우가 많아집니다. 이때 props drilling 문제를 피하고 전역 상태를 효율적으로 관리할 수 있도록 돕는 도구가 바로 Context API입니다.1. Context API란?Context API는 React에서 전역적으로 데이터를 공유할 수 있도록 도와주는 기능입니다. 부모-자식 관계를 타고 props를 전달하지 않고도 상태를 공유할 수 있습니다.2. 사용 예제// 1. Context 생성const ThemeContext = React.createContext();// 2. Provider로 상태 공유function App() { const [theme, setTheme] = useState('light'); return ( ..

React에서 컴포넌트의 상태를 관리할 때 가장 많이 사용되는 훅은 useState와 useReducer입니다. 이 둘은 각각의 장점과 사용 목적이 다르기 때문에 상황에 맞게 선택하는 것이 중요합니다.1. useState란?useState는 함수형 컴포넌트에서 상태를 선언하고 사용할 수 있도록 해주는 React Hook입니다. 간단한 상태나 값이 하나인 경우에 주로 사용됩니다.const [count, setCount] = useState(0);버튼 클릭 등 단순한 이벤트 처리에 적합하며, 직관적이고 사용하기 쉬운 것이 큰 장점입니다.2. useReducer란?useReducer는 복잡한 상태 로직이 필요한 경우 사용합니다. 상태가 여러 값으로 구성되어 있거나, 상태 변경 방식이 다양하고 명확해야 할 때 ..

React에서 폼 제출 처리와, 컴포넌트 간 데이터를 전달할 때 사용하는 props에 대해 알아보겠습니다.이 두 가지는 React를 구성하는 기본 요소 중 하나로, 기능적인 웹앱을 만들기 위해 꼭 필요한 개념입니다.1. 폼 제출 처리하기HTML에서 form 요소는 기본적으로 제출 시 페이지를 새로고침합니다. 하지만 React에서는 이를 막고 상태로 처리합니다.예제: 간단한 로그인 폼import { useState } from 'react';function LoginForm() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const handleSubmit = (e) => { e.pre..