WEB/REACT3

• 

  React - 변경 가능한 제목 만들기(Ant Design) 아이디어 Canva에서 프로젝트명을 바꿀 수 있는 것처럼 여행 제목을 바꿀 수 있어야 합니다. 초기 제목을 표현하기 위해서 h1태그를 활용했지만, 변경이 불가능합니다. Ant Design 컴포넌트 중 Input을 활용하면 변경 가능한 제목을 표현할 수 있습니다. 제목 관련 기능 및 구현 결과 제목을 클릭하면 변경할 수 있어야 합니다.(이 때 윤곽선은 나타나도 괜찮습니다.) Input인 티가 나지 않도록 윤곽선이 없어야 합니다. 값이 변경된 것을 인식하고 적당한 처리를 할 수 있어야 합니다. 글자가 제목처럼 커야합니다.(20px) 위 기능 대로 구현한 결과는 아래와 같습니다. 구현 코드 const editableTitleStyle: React.CSSProperties = { border: "none", m.. WEB/REACT 2024. 4. 10.

• 

  React - useState, Hooks 기초 React QuickStart Quick Start – React The library for web and native user interfaces react.dev Updating the screen 컴포넌트가 특정 정보를 기억하고, 이를 보여주는 기능이 필요할 때 사용합니다. ex) 버튼이 클릭된 횟수를 세는 경우가 있죠 이 때, 아래 코드를 사용하면 특정 값의 변화에 따라 컴포넌트가 변화하는 것을 확인할 수 있습니다. 여기서 반드시 setCount(또는 본인이 설정한 함수)로 count(state)를 변경해주어야 합니다. import { useState } from 'react'; function MyButton() { const [count, setCount] = useState(0); func.. WEB/REACT 2024. 4. 6.

• 

  React - 완전 기초 리액트 Quick Start Quick Start – React The library for web and native user interfaces react.dev React Component - 반드시 대문자로 시작해야합니다. - HTML은 반드시 소문자이어야 합니다. JSX 아래와 같은 Markup Syntax를 JSX라 부른다. 별도 설치 없이 사용할 수 있습니다. - JSX 태그는 HTML보다 엄격한 규칙을 따라야합니다. - 닫는 태그 가 반드시 필요하며, - 여러 개의 JSX를 리턴할 수 없습니다. - 하나의 JSX태그로 감싸서 리턴해야합니다. ex) ..., ... 엄청 긴 HTML을 JSX코드로 바꾸려면, 다음 페이지에서 변환해보세요~ https://transform.tools/html-t.. WEB/REACT 2024. 4. 6.