전체 > 각성한데브키라 (64) 리액트 08: React useState훅을 이용한 상태에 반응하는 UI표현 안녕하세요, 각성한 데브키라입니다. 이 포스팅에서는 목록과 관련된 이벤트 처리에 대해 다루며, 특히 목록의 index값의 중요성을 강조합니다. 목록에 이벤트를 적용하기 전에 각 항목에 id값을 할당하는 방법을 사용하여 이벤트 처리를 더 효율적으로 만들 수 있습니다. 이 방법을 통해 이벤트 처리 과정을 실습해 보는 내용을 다룹니다. App.jsimport logo from './logo.svg';import './App.css';import {useState} from 'react';function Header(props){ console.log(props); console.log(props.title); return( { e.preventDefault();//기본.. 리액트 07: 리스트 형태의 사용자 정의 이벤트 구현 안녕하세요, 각성한 데브키라입니다. 이 포스팅에서는 목록과 관련된 이벤트 처리에 대해 다루며, 특히 목록의 index값의 중요성을 강조합니다. 목록에 이벤트를 적용하기 전에 각 항목에 id값을 할당하는 방법을 사용하여 이벤트 처리를 더 효율적으로 만들 수 있습니다. 이 방법을 통해 이벤트 처리 과정을 실습해 보는 내용을 다룹니다. App.jsimport logo from './logo.svg';import './App.css';function Header(props){ console.log(props); console.log(props.title); return( { e.preventDefault();//기본 이벤트의 동작을 막아줌 props.onCh.. 리액트 06: 사용자 정의 이벤트 구현 안녕하세요, 각성한 데브키라입니다. 웹 개발을 하다 보면 사용자의 행동에 따라 다양한 이벤트를 처리해야 할 필요가 있습니다. 오늘은 리액트에서 사용자의 클릭 이벤트를 다루는 방법과, 이벤트에 필요한 데이터를 전달하는 방식에 대해 알아보겠습니다. [ 핵심 내용정리 ][ 주요 부분만 스크랩한 코드입니다. ]====== 변수선언 ====== const topics = [ {id:1, title:"게시글1", content:"컨텐츠1..."}, {id:2, title:"게시글2", content:"컨텐츠2..."}, ] ====== 컴포넌트를 호출 ====== { ====== 컴포넌트에서 이벤트가 발생 후 이벤트 데이터를 전달받음 ====== ...내용 .. 리액트 05: 리스트데이터의 활용 topics변수 사용 안녕하세요, 각성한 데브키라입니다. 오늘은 React에서 'topics' 변수를 활용해 데이터를 효과적으로 관리하는 방법을 알아봅니다. 이를 통해 동적 데이터를 사용자에게 보다 효율적으로 제공하는 방법을 살펴보겠습니다.[ 핵심 내용정리 ] 배열형태의 토픽변수를 Prop형태로 전송함으로써 동적으로 데이터를 가공할 수 있습니다.토픽형태의 변숫값을 사용할 때는 key값을 할당해서 사용해야 합니다.props 변수 사용 시 http://abc.com/'+props.path}"> 링크 이런 식으로 조합해서 사용할 수 있습니다.1. topics형태의 변수 하드코딩 주입토픽변수를 Nav컴포넌트에서 직접적으로 주입해서 출력하는 예제입니다.import './App.css';function Nav(){ const li.. 리액트 04: 컴포넌트의 섬세한 활용을 위한 props속성 사용 안녕하세요, 각성한 데브키라입니다. React 개발 과정에서 컴포넌트의 재사용성과 확장성은 매우 중요한 요소입니다. 이번 포스팅에서는 사용자 정의 태그와 속성(props)을 활용하여 다양한 표현을 가능하게 하고, 확장성을 극대화하는 방법을 살펴보겠습니다.[ 핵심 내용정리 ]React는 컴포넌트 기반의 라이브러리로, 재사용 가능한 UI 단위로 화면을 구성합니다. 이러한 컴포넌트들은 props라는 매개변수를 통해 데이터를 전달받아, 다양한 상황에 맞는 UI를 제공할 수 있습니다.1. App.js 소스코드이 코드에서 Header 컴포넌트는 props를 통해 전달받은 title 값을 활용하여, 기본 제목 "ALPHONSE"와 함께 전달받은 제목 "SNIPER"를 화면에 표시합니다. 이처럼 컴포넌트에 속성을 전달.. 리액트 03: 리액트의 꽃 사용자정의 태그 안녕하세요, 각성한 데브키라입니다. 웹 개발을 하다 보면 코드의 가독성과 유지보수성이 중요하다는 것을 깨닫게 됩니다. 특히, React에서는 사용자 정의 태그를 활용하여 이를 효율적으로 개선할 수 있습니다.[핵심 요약정리]사용자 정의 태그는 html형태를 만들어서 리턴해줄 수 있습니다. 이런 방식으로 코드구성을 심플하고 가독성 있게 만들어줍니다.1. App.js 최상위 DIV의 내부를 하드코딩으로 구현 App.js - 모든 소스코드를 최상위 DIV에 기술하는 방식을 효율적이지 않습니다.import './App.css';function App() { return ( ALPHONSE react .. 리액트 02: 리액트 배포본 생성을 위한 npm run build 안녕하세요, 각성한 데브키라입니다. 오늘은 리액트(React) 앱을 빌드하고 서버에서 출력하는 방법을 소개합니다. 서버 중단 후, 'npm run build'로 배포본을 생성하는 과정을 다룰 예정입니다. 이를 통해 사용자가 앱을 접할 수 있게 합니다.[ 핵심 요약정리 ]※ VsCode의 bash터미널로 접속1. 프로젝트빌드 : npm run build 2. 웹서버인스톨 : npm install -g serve3. 서버실행 정지 서버시작: serve -s build 서버정지: Ctrl + C (Windows/Linux) 또는 Command + C (Mac)4. 접속 Local: http://localhost:3000Network: http://192.168.0.31:3000 1. 리액트 프로젝트 .. 리액트 01: React 설치와 초기화면 출력 안녕하세요, 각성한 데브키라입니다. 오늘은 사용자 인터페이스 구축에 필수인 리액트(React) 프로젝트 시작 방법을 소개합니다. 이 글은 Node.js와 Visual Studio Code 설치에서 리액트 앱 생성까지의 전 과정을 단계별로 안내합니다. 리액트는 선언적이고 효율적인 JavaScript 라이브러리로, 복잡한 UI와 데이터의 변화가 잦은 대규모 애플리케이션을 쉽게 다룰 수 있습니다. 시작해 볼까요?[ 핵심 요약정리 ]1. VsCode에서 프로젝트 디렉터리 생성2. 디렉터리에서 터미널 명령어 실행npx create-react-app . 3. 기존 샘플에 작성된 내용제거App.js, App.css4. 로컬서버 실행명령 npm start접속 url: localhost:30001. NodeJs v20... 이전 1 2 3 4 5 6 7 8 다음
