DOTI Project

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...

PHP 8은 단순한 버전 업데이트가 아닙니다.성능 향상은 물론이고, 개발자가 코드를 더 간결하고 안전하게 작성할 수 있도록 여러 혁신적인 기능이 도입되었습니다.이번 글에서는 PHP 8의 핵심 기능 7가지를 정리해보았습니다.기존 PHP 7과의 차이도 함께 살펴보며, 실무에서 어떻게 활용할 수 있는지도 간단히 소개해드릴게요.1. JIT (Just In Time Compiler)가장 큰 변화는 JIT입니다.PHP 8에서는 Zend 엔진에 JIT 컴파일러가 추가되어 코드 실행 속도가 크게 향상됩니다.기존: 인터프리터 방식으로 매번 코드를 해석PHP 8: JIT으로 일부 코드를 기계어로 바로 컴파일 → 실행 속도 개선특히 수치 계산, 이미지 처리, 머신러닝 등 반복 연산이 많은 작업에서 성능 향상이 큽니다.웹 애..

PHP 개발을 하다 보면 아무 생각 없이 함수를 사용하곤 합니다.그런데 경우에 따라선 함수보다 연산자를 사용하는 것이 더 빠르고 효율적일 수 있다는 사실, 알고 계셨나요?오늘은 자주 사용되는 함수들을 연산자로 대체했을 때의 성능 차이와, 실제로 어떻게 코드를 개선할 수 있는지 알아보겠습니다.1. strlen() 대신 isset($str[$n]) 사용예시)// 기존 코드if (strlen($str) > 5) { // 처리}strlen() 함수는 문자열의 길이를 계산하기 때문에, 내부적으로 모든 문자를 확인하게 됩니다.그런데 우리가 실제로 알고 싶은 건, 그 길이가 일정 이상이냐는 것이죠.아래와 같이 isset()을 사용하면 더 빠르게 판단할 수 있습니다.// 최적화된 코드if (isset($str[5..

PHP 루프 성능 최적화 팁불필요한 반복을 줄여 속도 높이기루프는 PHP에서 정말 자주 사용하는 구조입니다. 그런데 잘못 사용하면,성능 저하의 주범이 되기도 하죠.이번 글에서는 실무에서 자주 발생하는 비효율적인 루프 코드를더 빠르고 효율적으로 바꾸는 팁을 알려드릴게요.1. count()는 루프 밖에서 한 번만 계산하세요// 비효율적인 코드for ($i = 0; $i 위 코드는 count($items)를 루프 돌 때마다 계속 호출하게 됩니다.// 최적화된 코드$length = count($items);for ($i = 0; $i 또는 가능하다면 foreach를 사용하세요. 더 빠르고 깔끔합니다.2. 루프 안에서 함수 호출은 최소화하세요// 비효율적인 코드foreach ($users as $user) { ..