React에서 프로필 페이지를 만드는 것은 필수적일 뿐만 아니라 매우 재미있습니다! 이를 통해 사용자는 자신의 개인 정보를 스타일리시하게 보고 관리할 수 있습니다. 이 튜토리얼에서는 멋진 프로필 사진을 위한 Avatarium, 원활한 탐색을 위한 React Router, 데이터 가져오기를 위한 Axios, 양식 입력 처리를 위한 Formik 등 멋진 npm 패키지를 사용하여 세련된 프로필 페이지를 구축하겠습니다. 뛰어들어 놀라운 것을 만들어 봅시다!

전제 조건

시작하기 전에 다음 사항이 있는지 확인하세요.

• Node.js 및 npm 설치
• React에 대한 기본 이해
• create-react-app 사용하여 새로운 React 프로젝트가 생성되었습니다.

1단계: React 프로젝트 설정

먼저, 아직 새 React 프로젝트를 만들지 않았다면 다음을 만듭니다.

 npx create-react-app profile-page cd profile-page

2단계: 필수 npm 패키지 설치

이 튜토리얼에는 여러 npm 패키지가 필요합니다.

• 아바타리움(Avatarium): 무작위 테마 아바타 생성
• React Router: 탐색 처리용
• Axios: API에서 데이터를 가져오는 데 사용됩니다.
• Formik: 양식 상태 및 유효성 검사 처리용

다음을 실행하여 이러한 패키지를 설치합니다.

 npm install @sabfry/avatarium react-router-dom axios formik

3단계: React Router 설정

우리는 애플리케이션의 여러 페이지 사이를 탐색하기 위해 React Router를 사용할 것입니다. 먼저 App.js 에서 라우터를 설정합니다.

 import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import ProfilePage from './ProfilePage';

 function App() { return ( <Router> <Switch> <Route path="/profile" component={ProfilePage} /> </Switch> </Router> ); }export default App;

4단계: 프로필 페이지 구성 요소 만들기

다음으로 ProfilePage.js 구성 요소를 만듭니다. 이 구성 요소는 아바타, 이름, 이메일을 포함한 사용자의 프로필 정보를 표시하고 사용자가 form.jsx를 사용하여 정보를 업데이트할 수 있도록 합니다.

 import React, { useState, useEffect } from 'react'; import axios from 'axios'; import Avatar from '@sabfry/avatarium'; import { Formik, Form, Field } from 'formik';

 const ProfilePage = () => { const [user, setUser] = useState(null); useEffect(() => { axios.get('https://api.example.com/user') .then(response => setUser(response.data)) .catch(error => console.error('Error fetching user data:', error)); }, []); if (!user) return <div>Loading...</div>; return ( <div className="profile-page"> <h1>Profile Page</h1> <div className="profile-info"> <Avatar theme="blobs" /> <h2>{user.name}</h2> <p>{user.email}</p> <Formik initialValues={{ name: user.name, email: user.email }} onSubmit={(values, { setSubmitting }) => { axios.post('https://api.example.com/user/update', values) .then(response => { setUser(response.data); setSubmitting(false); }) .catch(error => { console.error('Error updating user data:', error); setSubmitting(false); }); }} > {({ isSubmitting }) => ( <Form> <div> <label htmlFor="name">Name</label> <Field id="name" name="name" placeholder="John Doe" /> </div> <div> <label htmlFor="email">Email</label> <Field id="email" name="email" placeholder="[email protected]" type="email" /> </div> <button type="submit" disabled={isSubmitting}> Update </button> </Form> )} </Formik> </div> </div> ); };export default ProfilePage;

이 구성요소에서:

• useState 후크를 사용하여 사용자 데이터를 관리합니다.

• useEffect 후크는 구성 요소가 마운트될 때 모의 API에서 사용자 데이터를 가져옵니다.

• 우리는 Avatarium의 Avatar 구성 요소를 사용하여 무작위 테마의 아바타를 표시합니다.

• Formik은 양식 상태 및 유효성 검사를 처리하는 데 사용되므로 양식 입력을 관리하고 제출을 쉽게 처리할 수 있습니다.

5단계: 프로필 페이지 스타일 지정

프로필 페이지의 스타일을 지정하려면 몇 가지 기본 CSS를 추가하세요. ProfilePage.css 파일을 생성하고 ProfilePage.js 로 가져옵니다.

 /* ProfilePage.css */ .profile-page { display: flex; flex-direction: column; align-items: center; padding: 20px; }

 .profile-info { display: flex; flex-direction: column; align-items: center; border: 1px solid #ddd; padding: 20px; border-radius: 10px; background-color: #f9f9f9; }.profile-info div { margin-bottom: 10px; }button { background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; }button:disabled { background-color: #c0c0c0; cursor: not-allowed; }

이 CSS 파일을 ProfilePage.js 로 가져옵니다.

 import './ProfilePage.css';

6단계: 애플리케이션 실행

마지막으로 애플리케이션을 실행하여 실제 프로필 페이지를 확인하세요.

 npm start

프로필 페이지를 보려면 http://localhost:3000/profile 로 이동하세요.

결론

이 튜토리얼에서는 React, Avatarium, React Router, Axios 및 Formik을 사용하여 간단한 프로필 페이지를 구축했습니다. 이 페이지는 API에서 사용자 데이터를 가져와 무작위로 생성된 아바타와 함께 표시하며, 사용자는 양식을 사용하여 정보를 업데이트할 수 있습니다. 사용자 정보에 대한 추가 필드, 양식에 대한 유효성 검사 규칙, 향상된 스타일 지정 등 더 많은 기능을 추가하여 이 예제를 확장할 수 있습니다.