IT기록 isaac

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에서 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 컴포넌트에 동적으로 변..