React51 [React] react-scroll을 활용한 부드러운 앵커 스크롤 (Anchor Scroll) 구현하기 안녕하세요 오늘은 React 환경에서 react-scroll 라이브러리를 활용해 클릭 시 부드럽게 섹션으로 이동하는 스크롤 내비게이션을 만들어보겠습니다. 1. 먼저 생성돼 있는 react 프로젝트로 이동합니다.cd [my-react-project] Tailwind CSS 가 사용될 예정이니 아래 링크를 참고해 Tailwind css 를 설치해주세요 Installing with Vite - InstallationIntegrate Tailwind CSS with frameworks like Laravel, SvelteKit, React Router, and SolidJS.tailwindcss.com 2. react-scroll 설치npm install react-scroll- 이 라이브러리를 .. 2025. 7. 14. [React] 텍스트 입력 시 자동으로 필드 추가하기 (Material UI 활용) 안녕하세요 오늘은 리액트를 활용하여 텍스트 입력 시, 새로운 창이 자동으로 추가 되는 입력 폼을 만들어보도록 하겠습니다. 1. 먼저 깔끔한 텍스트 입력창을 위해 Material UI 라이브러리 를 프로젝트에 추가해줍니다. npm install @mui/material @emotion/react @emotion/styled Material UI 공식 홈페이지 - 설치 및 사용방법 안내 Installation - Material UIInstall Material UI, the world's most popular React UI framework.mui.com - Material UI 는 Google의 Material Design 원칙을 기반으로 한 React 라이브러리입니다. - 버튼, 폼, 테이.. 2025. 7. 12. [React] Hook 함수형 컴포넌트 안녕하세요!리액트를 통해 개발을 하다 보면 useState, useEffect 같은 단어들을 자주 접하셨을 텐데요,이들은 모두 '훅(Hook)'이라는 리액트의 기능을 담당하는 함수들입니다. 훅(Hook)이 등장하기 전: 클래스 컴포넌트의 복잡함훅이 등장하기 전, 리액트에서 '상태(state)'를 관리하거나 '생명주기(lifecycle)' 기능을 사용하려면 반드시 클래스 컴포넌트(Class Component) 사용해야 했습니다. import React, { Component } from 'react';class CounterClass extends Component { constructor(props) { super(props); // state는 constructor 안에서 this.stat.. 2025. 6. 30. [React] 마크다운 프리뷰어 만들기 마크다운이란? 안녕하세요! 이것은 굵은 글씨와 기울임꼴 입니다. 목록 아이템 또 다른 아이템 보시다시피 HTML은 태그가 많아 다소 번거롭고, 글 자체의 가독성을 해치기도 합니다. 글을 쓰기 위한 목적보다는 문서의 구조를 정의하는 데 더 초점이 맞춰져 있었죠. 이런 불편함을 해소하기 위해 2004년 존 그루버(John Gruber)는 "쉽게 쓰고, 쉽게 읽히고, 쉽게 HTML로 변환되는" 마크다운 언어를 만들었습니다.쉬운 문법: #, *, - 와 같이 간단한 기호 몇 가지만으로도 서식을 표현할 수 있습니다. # 제목 → 제목 **굵게** → 굵게 * 목록 → 목록 높은 가독성: 마크다운 문법 자체가 읽기 쉽게 디자인되어 있습니다. HTML처럼 복잡한 태그 없이도 글의 구조를 파악하기 용이합니.. 2025. 6. 23. [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. 이전 1 2 3 4 5 6 다음
