React47 [React] useReducer 사용하여 간단한 계산기 만들기 useReducer 란 무엇일까요? useState의 대체재이며 복잡한 상태 로직을 컴포넌트 외부로 분리하는 상태 관리 훅입니다. Reducer: (주방장/레시피북): 상태를 어떻게 변경할지에 대한 '로직'이 담긴 순수 함수. Action: (주문서): 상태 변경을 요청하는 '명령'이 담긴 객체. (type, payload) Dispatch: (웨이터): Action을 Reducer에게 전달하는 '함수'.(컴포넌트 UI) → dispatch(action) → (Reducer) → (새로운 State) → (컴포넌트 UI 업데이트) 그럼 왜 useReducer 을 사용할까요?1. "UI를 그리는 코드"와 "데이터를 처리하는 로직"이 분리되어 컴포넌트가 훨씬 깔끔해지고 본연의 역할(렌더링)에 충실해집니다.2.. 2025. 6. 16. [React] Todo-List 만들기 리액트란 무엇일까요?사용자 인터페이스 (UI)를 만들기 위한 자바스크립트 라이브러리 입니다. 1. 사용자 인터페이스: 우리가 웹사이트나 앱에서 보는 모든것, 즉 버튼, 입력창, 메뉴, 사진 등 화면에 보이는 모든 요소를 의미합니다.2. 자바스크립트 라이브러리: '프레임워크'가 아닌 '라이브러리'라는 점이 중요합니다. 프레임워크가 집을 짓는데 필요한 모든 것(설계도, 규칙, 도구)을 제공하는 '풀세트'라면, 라이브러리는 특정 기능(예: 못을 박는 망치)을 쉽게 사용 할 수 있도록 제공하는 '도구'에 가깝습니다. 리액트를 왜 사용할까요?과거 웹페이지의 특정 부분에는 (예:'좋아요' 숫자)이 바뀌면 페이지 전체를 새로고침 해야했습니다. 요즘 웹사이트는 그렇지 않죠인스타그램에서도 '좋아요'를 눌러도 페이지 전체.. 2025. 6. 9. [React] 좋아요 버튼 클릭 시 확인 모달 띄우기 안녕하세요 오늘은 좋아요 버튼 누를때 확인 모달을 띄워보도록 하겠습니다. 좋아요 버튼 구현에 대한 게시글은 아래 링크에서 확인하실 수 있습니다 [React] useState 로 좋아요 버튼 상태 관리하기안녕하세요 오늘은 지난 시간에 만들었던 슬라이드 UI 카드에 좋아요 버튼을 구현하고자 합니다. 지난 게시글은 아래 링크에서 확인하실 수 있습니다. [React] 슬라이드 카드 UI 만들기안녕하세요.stickode.tistory.com 1. 먼저 src/components/ 디렉토리에 ConfirmModal.js 파일을 만들어줍니다. 모달 창 ui 코드를 작성합니다 ConfirmModal.js // src/components/ConfirmModal.jsfunction ConfirmModal({ isO.. 2025. 6. 4. [React] useState 로 좋아요 버튼 상태 관리하기 안녕하세요 오늘은 지난 시간에 만들었던 슬라이드 UI 카드에 좋아요 버튼을 구현하고자 합니다. 지난 게시글은 아래 링크에서 확인하실 수 있습니다. [React] 슬라이드 카드 UI 만들기안녕하세요. 오늘은 리액트를 사용해 슬라이드 카드 UI를 만들어보겠습니다. 슬라이드 카드는 이미지, 텍스트 등을 한 화면에서 넘기며 보여줄 수 있는 방식으로, 포트폴리오, 프로젝트 소개, 리stickode.tistory.com 1. 먼저 좋아요 버튼을 "컴포넌트" 디렉토리에 만들어줍니다. components 폴더가 없다면 만들어줍니다 경로: src/components/LikeButton.js import { useState } from "react";function LikeButton() { const [liked.. 2025. 5. 28. [React] 메뉴바로 페이지 전환하기 안녕하세요 오늘은 react-router-dom 을 사용하여 페이지 전환을 해보도록 하겠습니다. 슬라이드 카드 만들기에 이어서 진행할 예정입니다. 해당 게시글은 아래 링크에서 확인하실 수 있습니다. [React] 슬라이드 카드 UI 만들기안녕하세요. 오늘은 리액트를 사용해 슬라이드 카드 UI를 만들어보겠습니다. 슬라이드 카드는 이미지, 텍스트 등을 한 화면에서 넘기며 보여줄 수 있는 방식으로, 포트폴리오, 프로젝트 소개, 리stickode.tistory.com 1. react-router-dom 설치먼저 리액트 라우터 돔을 설치합니다. Windows 개발 환경 기준 VS Code 의 터미널 단축키는 입니다 npm install react-router-dom 2. 페이지 만들기 (프로젝트 구조)s.. 2025. 5. 21. [React] 슬라이드 카드 UI 만들기 안녕하세요. 오늘은 리액트를 사용해 슬라이드 카드 UI를 만들어보겠습니다. 슬라이드 카드는 이미지, 텍스트 등을 한 화면에서 넘기며 보여줄 수 있는 방식으로, 포트폴리오, 프로젝트 소개, 리뷰 카드 등 다양한 구성에 활용할 수 있습니다. React에서는 외부 라이브러리 없이도 직접 구현이 가능하지만, 이번에는 react-slick을 활용해 구현해보았습니다. 1. 슬라이드 목록 만들기 자바 스크립트 배열로 슬라이드 하나하나에 들어갈 제목, 내용, 이미지 등을 담은 "목록"을 생성합니다. const cardData = [ { title: "1. Wall Sina", description: "The innermost wall, where the royal family and no.. 2025. 5. 15. [React] 인증번호 타이머 만들기 안녕하세요. 이번 시간에는 React로 인증번호 타이머를 만들어보겠습니다. React 함수 컴포넌트로 만들었습니다. 1. 소스 코드 import React, { useState, useEffect } from 'react'; function AuthNumTimer() { // 초기 타이머 시간 (초)을 정의함. 180초, 3분. const initialTime = 180; // 남은 시간을 상태로 관리함. const [remainingTime, setRemainingTime] = useState(initialTime); useEffect(() => { // useEffect를 사용하여 컴포넌트가 마운트될 때 타이머 시작. const timer = setInterval(() => { // 남은 시간이 0보.. 2023. 12. 22. [React] 리액트 아이콘 사용하여 아이콘 적용하기 리액트로 개발을 진행하다 보면 간단한 아이콘을 사용해서 웹 구성요소를 만들어 주고 싶을때가 있습니다. 이때 react-icons 라이브러리를 이용해서 간편하게 상용되는 아이콘들을 사용할 수 있습니다. 먼저 프로젝트에 react-icons 라이브러리를 설치해야 합니다. 아래 명령어를 사용하여 npm 또는 yarn을 통해 설치할 수 있습니다. npm install react-icons --save // npm 사용하는 경우 yarn add react-icons// yarn 사용하는 경우 설치가 완료되면, 원하는 아이콘을 컴포넌트에 추가할 수 있습니다. 예를 들어, AiFillHeart 아이콘을 사용하는 방법은 다음과 같습니다. 1.필요한 아이콘을 가져옵니다. 아이콘은 아래 링크에서 확인할 수 있습니다. ht.. 2023. 12. 12. [React] 드래그앤 드롭으로 파일 업로드 하기 오늘은 React를 사용하여 파일 업로드 기능을 갖춘 컴포넌트를 만들어보겠습니다. 이 컴포넌트는 파일 선택, 드래그 앤 드롭, 그리고 서버로 파일을 업로드할 수 있는 기능을 제공합니다. 파일 업로드 컴포넌트 생성 먼저, React 프로젝트에서 `UploadBox` 컴포넌트를 생성합니다. 이 컴포넌트는 파일을 선택하거나 드래그하여 업로드하고, 선택한 파일의 정보를 표시합니다. import React, { useState } from 'react'; const UploadBox = ({ socket }) => { // 상태 변수 초기화 const [isActive, setActive] = useState(false); const [uploadedInfo, setUploadedInfo] = useState(n.. 2023. 11. 22. 이전 1 2 3 4 5 6 다음
