본문 바로가기

📂 Project/Solo2

[🍔 맛집 공유 사이트] 리액트로 CRUD 구현하기 🛠️ 구현할 기능 웹 사이트 내에서 사용자들이 자유롭게 맛집 추천 글을 올릴 수 있는 기능을 구현하고 싶다. As-Is: 현재는 기존에 올라온 글을 볼 수 있기만 함 ➡️ To-be: 맛집 제보 버튼을 클릭하면 글을 Create, Read, Update 그리고 삭제 버튼을 누르면 Delete 할 수 있다. 💡 구현 과정 - Create 1. input 칸을 만든다. input의 타입은 아래와 같이 다양하니 골라서 활용해 보자. // 순서대로 or 그냥 2. onChange 이벤트 핸들러를 활용한다. onChange 또는 onInput라는 이벤트 핸들러를 사용해 사용자가 에 무언가 입력 시, 중괄호 안에 있는 코드가 실행되도록 한다. {console.log("사용자가 입력하면 나타나는 내용")}} /> 아.. 2023. 5. 16.

[🍔 맛집 공유 사이트] 모달창 같은 동적인 UI 만들기 🛠️ 구현할 기능 성수역, 강남역, 압구정역 총 세 개의 제목이 있고 현재 띄워지는 모달창에는 제목이 압구정역으로만 보이는데, 각 제목을 클릭하면 그에 맞는 모달창을 띄우고 싶다. 예를 들어, 성수역 제목을 클릭하면 성수역 맛집을 소개하는 모달창이 띄워지도록 말이다. As-Is: 3개의 제목이 있으나 현재는 모달창에 1개의 제목으로만 뜸 ➡️ To-be: 각 제목을 클릭하면 해당 제목을 가진 모달창을 띄우고 싶음 🧐 처음 작성한 코드 처음에는 제목당 1개씩 총 3개의 state를 만들어 주어야 하나, 아니면 타이틀 인덱스에 맞게 props를 내려주어야 하나 생각했다. 일단은 modalTitle이라는 state를 생성해주고, 삼항연산자 안에 넣어주었다. import './App.css'; import lo.. 2023. 5. 11.

이전 1 다음

티스토리툴바