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에서 폼 제출 처리와, 컴포넌트 간 데이터를 전달할 때 사용하는 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..

React에서 이벤트 처리와 상태(state) 변화를 어떻게 다루는지 알아보겠습니다.웹 앱에서 사용자와의 상호작용은 필수적인 요소이므로 꼭 익혀야 하는 개념입니다.React에서 이벤트 처리란?React에서는 HTML과 비슷한 방식으로 이벤트를 처리하지만, 문법은 조금 다릅니다.HTML: onclick="함수명()"React: onClick={함수}기본 예제: 버튼 클릭 이벤트function ClickExample() { const handleClick = () => { alert('버튼을 클릭했습니다!'); }; return ( 클릭해보세요 );}React에서는 onClick, onChange, onSubmit 등 여러 이벤트 핸들러를 JSX 안에서 직접 사용할 수 있습니다.상태(sta..

React에서 배열 데이터를 화면에 출력하는 방법인 리스트 렌더링과꼭 함께 써야 하는 key 속성에 대해 알아보겠습니다.리스트 렌더링이란?React에서 배열 데이터를 반복해서 화면에 출력할 때는 JavaScript의 map() 함수를 사용합니다.다음은 가장 기본적인 예제입니다:function FruitList() { const fruits = ['사과', '바나나', '포도']; return ( {fruits.map((fruit, index) => ( {fruit} ))} );}포인트: 각 항목을 map으로 반복하며 를 반환하고, key 속성도 함께 지정해줍니다.왜 key가 필요할까요?React는 DOM을 효율적으로 업데이트하기 위해 가상 DOM을 사용합..

안녕하세요! 이번 글에서는 React에서 상태가 바뀔 때마다 어떤 작업을 처리해주는 useEffect 훅과상황에 따라 화면을 다르게 보여주는 조건부 렌더링에 대해 알아보겠습니다.useEffect란?useEffect는 React 컴포넌트가 렌더링된 이후에 특정 작업을 수행할 수 있도록 해주는 훅입니다.예를 들어, API 호출, 콘솔 로그 출력, 타이머 설정 등 컴포넌트가 화면에 나타난 후 실행되는 로직을 넣을 때 사용합니다.기본 사용법import { useState, useEffect } from 'react';function Timer() { const [count, setCount] = useState(0); useEffect(() => { console.log('컴포넌트가 렌더링되었습니다. ..

React에서 가장 기본적인 상태 관리 방법인 useState에 대해 알아보겠습니다.React 앱을 만들다 보면 버튼 클릭, 입력창 내용 변경 등으로 화면을 동적으로 변경해야 할 상황이 자주 생기는데요,이때 필요한 것이 바로 컴포넌트 상태(state)입니다.상태(state)란 무엇인가요?state는 컴포넌트 안에서 관리되는 데이터로, 이 값이 바뀌면 해당 컴포넌트는 자동으로 다시 렌더링됩니다.즉, 화면을 동적으로 바꾸기 위해 사용하는 핵심 기능입니다.useState 훅 소개React에서는 함수형 컴포넌트에서 상태를 사용할 수 있도록 useState 훅을 제공합니다.사용법은 아래와 같습니다:import { useState } from 'react';function Example() { const [cou..

React 개발에서 가장 기본이 되는 컴포넌트 분리와 props 사용법에 대해 알아보겠습니다.React는 UI를 컴포넌트 단위로 쪼개서 개발하는 구조인데요, 이 구조를 이해하면 유지보수나 재사용성이 매우 좋아집니다.컴포넌트란?컴포넌트(Component)는 React에서 UI를 구성하는 기본 단위입니다.하나의 컴포넌트는 함수처럼 만들 수 있고, 원하는 데이터를 props로 전달해 재사용할 수 있습니다.간단한 컴포넌트 예제:function Welcome() { return 안녕하세요!;}이 컴포넌트를 App에서 다음과 같이 사용할 수 있습니다:function App() { return ( );}컴포넌트 분리하나의 파일에서 모든 코드를 작성하기보다는, 역할별로 파일을 나눠 작성하..

React 개발에 꼭 필요한 핵심 문법 중 하나인 JSX에 대해 알아보겠습니다.처음 React를 접하신 분들이 가장 먼저 궁금해하는 것 중 하나가 바로 JSX입니다."HTML이랑 비슷한데... 자바스크립트 안에 HTML을 쓰는 건가요?"이런 의문을 가지고 계신다면, 이 글이 도움이 될 거예요!JSX란?JSX(JavaScript XML)는 자바스크립트 안에서 HTML 같은 구조를 쓸 수 있게 해주는 React의 문법 확장입니다.JSX를 사용하면 UI를 보다 직관적이고 깔끔하게 작성할 수 있습니다.예시:const element = 안녕하세요, React!;이렇게 보면 HTML처럼 보이지만, 사실은 자바스크립트입니다.React가 이 코드를 내부적으로 다음처럼 해석합니다:const element = React...