본문 바로가기
반응형

React

[React] 게시판 만들기 - Tailwind CSS 적용 저번에 만들 게시판에 Tailwind CSS적용에서 빠진 부분이 있습니다.index.css 파일 수정부터 진행하겠습니다. 1. 먼저, src폴더 안의 있는 index.css 파일을 찾아주세요.2. 이 파일을 텍스트 에디터로 열어주세요.3. 파일의 모든 내용을 지우고 다음의 코드로 교체합니다.@tailwind base;@tailwind components;@tailwind utilities;이 세줄의 코드는 Tailwind CSS이 기본스타일, 컴포넌트 스타일, 그리고 유틸리티 크래스들을 불러 오는 역할을 합니다.4. 파일을 저장합니다. Tailwiind CSS 가 제대로 작동하기 위해서는 tailwind.config.js 파일도 올바르게 설정되어 있어야합니다. 이 파일을 프로젝트 루트 디렉토리에 있어야합.. 더보기
[React] 게시판 리스트 추가 저번에 올린 게시판이 밋밋하여, 게시판을 추가하는 기능을 추가하겠습니다. 게시판 리스트를 추가하면 사용자가 여러 게시판을 선택할 수 있고, 선택한 게시판의 글을만 볼수 있게 됩니다. 게시판 코딩 및 설명import React, { useState } from 'react';const BoardWithList = () => { const [boards, setBoards] = useState([ { id: 1, name: '일반 게시판' }, { id: 2, name: '질문과 답변' }, { id: 3, name: '자유 게시판' } ]); const [selectedBoard, setSelectedBoard] = useState(1); const [posts, setPosts] .. 더보기
[React] 간단한 게시판 만들기. React 로 간단한 게시판을 만들겠습니다.  먼저, 간단한 게시판의 기본 구조를  파악해봅니다.1. 게시글 목록표시2. 새 게시글 작성 폼3. 게시글 삭제 기능 import React, { useState } from 'react';const SimpleBoard = () => { const [posts, setPosts] = useState([]); const [newPost, setNewPost] = useState({ title: '', content: '' }); const handleInputChange = (e) => { const { name, value } = e.target; setNewPost({ ...newPost, [name]: value }); }; const.. 더보기
[React] reducer에 관하여. React에서 reducer는 상태 관리를 위한 중요한 개념입니다. Redux 라이브러리에서 유래했지만, React의 useReducer Hook을 통해 React 자체에서도 사용할 수 있게 되었습니다. Reducer의 주요 역할과 특징을 설명해드리겠습니다.상태 관리:Reducer는 애플리케이션의 상태를 관리합니다. 특히 복잡한 상태 로직을 다룰 때 유용합니다.예측 가능한 상태 변화:Reducer는 현재 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수입니다. 이는 상태 변화를 예측 가능하고 일관되게 만듭니다.중앙화된 상태 로직:여러 컴포넌트에 걸쳐 사용되는 복잡한 상태 로직을 한 곳에서 관리할 수 있게 해줍니다.디버깅 용이성:상태 변화가 reducer 함수 내에서 일어나기 때문에, 상태가 어떻게 변.. 더보기
[React] React에서 전역변수는 어떻게 쓸까? React에서는 전역 상태를 관리하기 위해 일반적인 전역 변수를 사용하는 대신, 더 구조화된 방법을 사용하는 것이 좋습니다. 전역 상태 관리에는 주로 다음과 같은 도구와 패턴이 사용됩니다:Context API와 useContext 훅상태 관리 라이브러리 (예: Redux, MobX)React Query (데이터 페칭 및 캐싱)Local Storage나 Session Storage (브라우저의 저장소 사용)각 접근 방식을 살펴보겠습니다.1. Context API와 useContext 훅React의 Context API는 전역 상태를 관리할 때 유용합니다. Context는 컴포넌트 트리 전체에서 데이터를 전달할 수 있게 해줍니다.예제: 간단한 전역 상태 관리import React, { createContex.. 더보기
[React] JavaScript의 이벤트와 useEffect와 비교. JavaScript의 이벤트 실행과 React의 useEffect는 서로 다른 개념이지만, 둘 다 특정 작업을 트리거하는 방법을 제공합니다. 두 개념을 구분하기 위해 각각을 자세히 살펴보겠습니다.JavaScript의 이벤트JavaScript의 이벤트는 사용자 상호작용 또는 특정 시스템 이벤트에 응답하여 코드를 실행하는 메커니즘입니다. 예를 들어, 클릭, 키보드 입력, 폼 제출, 페이지 로드 등이 이벤트에 해당합니다. 이벤트 리스너를 사용하여 특정 이벤트가 발생할 때 실행할 코드를 정의할 수 있습니다.예제: 이벤트 리스너 사용 Click Me 위 예제에서는 버튼 클릭 이벤트가 발생할 때마다 경고 창을 표시합니다. 이는 이벤트 리스너를 사용하여 특정 이벤트를 감지하고 처리하는 방식입니다.React.. 더보기
[React] 전역변수와 useContext 비교 useContext는 React에서 컨텍스트(Context) API와 함께 사용되는 훅으로, 컴포넌트 트리 전체에서 데이터를 공유할 수 있게 해줍니다. 이는 전역 변수를 사용하는 것과 유사한 점이 있지만, 더 구조적이고 React 컴포넌트 생명주기에 잘 통합된 방법을 제공합니다.useContext와 전역 변수의 비교전역 변수전역 변수는 애플리케이션의 어디서든 접근할 수 있는 변수입니다.JavaScript에서는 window 객체에 변수를 추가하여 전역 변수를 만들 수 있습니다.전역 변수를 사용할 때는 모든 컴포넌트가 직접 접근하고 수정할 수 있어 데이터의 추적과 관리가 어렵습니다.// 전역 변수 예제window.globalValue = 42;function Component() { console.log(.. 더보기
[React] useEffect 에 대하여 useEffect는 React의 함수형 컴포넌트에서 사이드 이펙트(side effects)를 처리하기 위해 사용하는 훅(hook)입니다. 사이드 이펙트란 컴포넌트의 렌더링 이외에 수행되어야 할 작업들을 의미합니다. 예를 들어, 데이터 가져오기(fetching data), 구독(subscription), DOM 조작 등이 사이드 이펙트에 해당합니다.기본 사용법useEffect 는 컴포넌트가 렌더링될 때마다 특정 작업을 수행하게 합니다. 기본 형태는 다음과 같습니다:import React, { useEffect } from 'react';function MyComponent() { useEffect(() => { // 여기에 사이드 이펙트를 처리하는 코드를 작성 console.log('컴포넌트가.. 더보기
반응형

티스토리툴바