Isaac Kim Dev Blog

React에 Bootstrap 적용 및 사용하는 방법 (간단하게 적용하기) Bootstrap 많이 들어보셨을 겁니다. Web사이트에 디자인을 해야 하는데 디자인에 약하거나 디자인을 직접 하기 싫은 경우 대안으로 선택되는 웹 디자인 방법이라고 할 수 있습니다. Bootstrap은 설치가 간편하고 적용하기가 쉽습니다. 다만 Bootstrap에서 제안하는 방식을 적용해야 하고, Bootstrap 공식 사이트에서 제공하는 컴포넌트들을 적용해야 Bootstrap을 이쁘게 잘 사용할 수 있습니다. React에 Bootstrap 적용하는 방법을 알아보겠습니다. 먼저 React Project가 준비되어 있어야 합니다. 없다면 다음 설치 명령어를 사용해서 React Project를 생성해 줍니다. React Projec..

React - Components 사이에서 데이터 공유하기 & lifting State Up React에서 컴포넌트들 사이에서 데이터를 공유하는 방법에 대해 알아보자. 먼저 컴포넌트 간의 데이터를 공유하지 않는 예제를 보자. import { useState } from 'react'; export default function MyApp() { return ( Counters that update separately ); } function MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( Clicked {count} times ); } 위 코드로 만들어진 렌더..

React App Delete 기능 구현하기 Create, Update에 이어서 마지막 Delete 기능을 구현해 보자. 일반적으로 Delete 버튼은 Update 버튼과 함께 있다. 게시판 상세 페이지에 수정, 삭제 버튼이 있듯이. 이전 글에서 mode state가 'READ'일 때 Update 버튼을 추가했다. 이전 글 2023.06.21 - [JS] - React App Update 기능 구현하기 mode state가 'READ'일 때, 즉 상세 페이지를 확인할 때 Update 버튼 아래에 'Delete' 버튼을 추가한다. 삭제 버튼의 기능을 추가한다. 삭제(Delete) 기능은 Create, Update와 비교하면 비교적 간단하다. 구현 방법은 다양하겠지만 위 코드는 다음과 같다. 빈 배열 new..

React App Update 기능 구현하기 Create 기능에 이어서 Update 기능을 구현하자. Update는 Create + Read 기능이라고 볼 수 있다. 기존 코드에서 Update 버튼을 추가한다. (버튼 = a 태그) 우선 버튼을 추가했는데, 이렇게 하면 어떤 것을 수정해야 하는지 명확하지 않다. 보통의 서비스라면 상세 페이지에 수정 버튼이 존재한다. 상세 페이지에 수정 버튼이 존재하도록 수정한다. mode state가 'READ'일 때 화면 처리하는 부분에 Update 버튼을 추가한다. (= 상세 페이지에 Update 버튼을 추가한다.) contextControl 변수에 저장하였으니, App 컴포넌트에서는 contextControl 변수를 호출한다. 그럼 이제 상세페이지에서만 Update..

React App Create 기능 만들기 현재 필자는 생활코딩 React를 보고 학습 내용을 작성하고 있다. 이 글을 쓰기 전까지 React의 Component, Props, Event, State에 대해서 알아보았다. 이번에는 응용 편이라고 할 수 있겠다. React App Create 기능 만들기 먼저 App.js 파일의 App 컴포넌트의 컴포넌트 배치 부분에서 본문이 보여지는 곳 아래에 Create 버튼(a tag)을 만들었다. 그리고 다른 a 태그들과 같이 기본 event는 막도록 하였다. 그리고 Header나 Nav 컴포넌트의 메뉴 리스트를 클릭했을 때 mode state가 변경되었던 것처럼, Create에서도 mode를 변경해 준다. 다른 화면을 띄우기 위해 mode를 변경하는 코드를 추가한..

React에서 State란? 지금까지 React의 Component, Props, Event에 대해 알아보았다. 이전 글 2023.06.18 - [JS] - React.js Start 리액트 시작하기, React App 만들기 2023.06.19 - [JS] - React Props에 대해 알아보자. Component에 데이터 보내기 2023.06.20 - [JS] - React에서 Event 처리 어떻게 할까? 이번에는 React에서 State 라는 개념을 알아볼 것이다. React에서 State란? React에서 Event에 의해 변경되는 동적인 값이다. state 관련 기능을 사용하기 위해서 먼저 react library에서 {useState} 를 import 시킨다. App 컴포넌트에 동적으로 변..

React에서 Event 처리 어떻게 할까? 이전 글에서 React 컴포넌트를 만들고, 컴포넌트에 데이터를 전달하고, 컴포넌트로 전달받은 데이터는 props로 꺼내어 사용하는 방법까지 익혔다. 이전 글 2023.06.18 - [JS] - React.js Start 리액트 시작하기, React App 만들기 2023.06.19 - [JS] - React Props에 대해 알아보자. Component에 데이터 보내기 이번에는 React에서 Event 처리에 대해 알아보자. 현재까지 작성한 코드 예제를 보자. function Header(props) { console.log("props",props,props.title) return {props.title} } function Nav(props) { cons..

React Props에 대해 알아보자. Component에 데이터 보내기 바로 이전 글에서 React 프로젝트 시작하기에 대한 글을 썼다. 이전 글 2023.06.18 - [JS] - React.js Start 리액트 시작하기, React App 만들기 이전 글에 대해서 간략히 설명하자면 1. React Project를 시작하기 위해 nodejs를 설치 2. React Project 생성 3. Project 구조 파악 4. React Component에 대해서, Component 만들기 에 대해서 알아보았다. 이제 컴포넌트(Component)를 응용하고, 컴포넌트에서 사용되는 Props라는 개념에 대해 알아보려고 한다. 어제까지 작성했던 코드는 다음과 같다. /src/App.js function Head..

React.js Start 리액트 시작하기, React App 만들기 React Project 설치 & 생성하기 React를 시작하기 위해서는 먼저 node.js가 설치되어 있어야 한다. 설치하지 않았다면 node.js 공식홈페이지에서 설치를 먼저 진행해야 한다. nodejs 공식 홈페이지 https://nodejs.org Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 학습하는 과정에서 Node 버전은 상관없다. LTS, Current 둘 중 하나 선택해서 Node.js 설치를 진행한다. node.js를 설치했다면 react 프로젝트를 생성한다. React 프로젝트 생성 명령어 npx c..

Next.js 시작하기, Next.js 프로젝트 생성하기 React 프레임워크 Next.js를 시작해 보자. 간단히 Next.js 프로젝트를 생성하는 방법에 대해 알아보자. 먼저 Next.js 공식 홈페이지로 접속한다. https://nextjs.org/ Next.js by Vercel - The React Framework Next.js Boilerplate A Next.js app and a Serverless Function API. Image Gallery Starter An image gallery built on Next.js and Cloudinary. Next.js Commerce An all-in-one starter kit for high-performance e-commerce sit..