React로 사용자 이름을 기반으로 아바타 만들기

우리는 종종 사용자 프로필에 대한 많은 디자인 작업을 하며 경우에 따라 사용자에 대한 정보를 가져와 아바타를 고정된 상태로 렌더링해야 하지만 경우에 따라 빈 문자열일 수 있으며 사용자의 첫 번째로 아바타를 생성해야 합니다. 그들의 first name 및 last name의 편지.

여기에서 최종 결과를 볼 수 있습니다: View link

API 및 반응 후크

우리는 이것을 API 사용하여 이름을 가져오고 정보를 필터링하여 이름을 사용하고 다음과 같은 20개의 결과를 반환할 것입니다.
https://randomuser.me/api/?inc=name&results=20
그런 다음 fetch API를 사용하여 정보를 가져오는 반응 후크를 만들 것입니다. 그러나 먼저 프로젝트의 루트에 hooks라는 폴더와 constants라는 파일을 생성하여 엔드포인트를 저장하고 모든 것을 정리합니다.

import { useEffect, useState } from "react";
import { API_ENDPOINT } from "../constants";

export const useData = () => {
  const [userNames, setUserNames] = useState([]);
  useEffect(() => {
    fetch(API_ENDPOINT)
      .then((res) => res.json())
      .then((data) => setUserNames(data.results));
      .catch((error) => console.log(error))
  }, []);
  return {
    userNames
  };
};

그런 다음 App.js 파일로 이동하여 후크를 가져오고 이름을 렌더링할 수 있습니다.

import { useData } from "./hooks/useData";

export default function App() {
  const { userNames } = useData();
  return (
    <div className="App">
      {userNames.map(({ name }) => (
        <p key={name.first}>{name.first}</p>
      ))}
    </div>
  );
}

구성품

이 프로젝트에 대해 두 가지 구성 요소를 만들 것입니다.

UserCard: 사용자 정보 및 아바타가 포함된 카드 요소를 렌더링합니다

.

UserPlaceHolder: first name 및 last name의 사용자 첫 글자로 원을 렌더링합니다.

사용자 카드 구성요소

import UserPlaceHolder from "./UserPlaceholder";

const UserCard = ({ first, last }) => {
  let username = `${first} ${last}`;
  return (
    <div className="user">
      <UserPlaceHolder name={username} />
      <p className="user__name">{username}</p>
    </div>
  );
};
export default UserCard;

UserPlaceHolder 구성 요소

import {
  generatePlaceholderName,
  generateRandomColorNumber
} from "../../utils";

const UserPlaceHolder = ({ name }) => {
  const userPlaceholder = generatePlaceholderName(name);
  const placeholderBackground = `hsl(${generateRandomColorNumber()}, 50% , 50%)`;
  return (
    <div
      className="user__placeholder"
      style={{
        backgroundColor: placeholderBackground
      }}
    >
      {userPlaceholder}
    </div>
  );
};
export default UserPlaceHolder;

Note:
As we are using Plain CSS, the best approach to create a dynamic background color is with the style pro in the element. Other solutions are:

• Sass
• CSS in JS (Styled components, emotion)

UserPlaceHolder 구성 요소에서 다음과 같은 utils 폴더에서 두 가지 기능을 가져옵니다.

generatePlaceholderName: 사용자 이름을 수신하고 first name 및 last name의 첫 글자를 반환하는 함수;

generateRandomColorNumber: 스타일 소품의 HSL 색상 속성에서 사용하기 위해 0에서 360 사이의 숫자를 반환하는 함수입니다. 이것은 각 카드에 대한 동적 배경을 생성하는 데 도움이 됩니다.

export function generateRandomColorNumber() {
  let randomHue = Math.floor(Math.random() * 360);
  return randomHue;
}
export function generatePlaceholderName(name) {
 //Split name by the space
  let splitUsername = name.split(" "), 

  /* we validate if the data comes correctly with optional chaining. In the worst case, we 
    return a empty string*/

   firstLetter = splitUsername[0]?.[0] ?? "", 
    secondletter = splitUsername[1]?.[0] ?? "";
    return `${firstLetter}${secondletter}`;
}

CSS 🧙‍♂️

구성 요소와 기능을 설명한 후 CSS 마법이 필요합니다.

:root {
  --body-bg: #f3f4fa;
  --card-border: #dcdce0;
}

body {
  min-height: 100vh;
  background-color: var(--body-bg);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;

}
.user {
  border: 1px solid var(--card-border);
  padding: 1rem;
  width: 100%;
  max-width: 180px;
  border-radius: 0.5rem;
  background-color: white;
}
.user__name {
  font-weight: bold;
}
.user__placeholder {
  width: 32px;
  height: 32px;
  margin-left: auto;
  margin-right: auto;
  padding: 0.5rem;
  display: grid;
  color: white;
  place-items: center;
  border-radius: 50%;
}

마지막 단계

마지막으로 UserCard를 가져와 정보를 렌더링하고 작동 중인 구성 요소를 확인합니다.

export default function App() {
  const { userNames } = useData();
  return (
    <div className="App">
      {userNames.map(({ name }) => (
        <UserCard key={name.first} first={name.first} last={name.last} />
      ))}
    </div>
  );
}

결론

귀하의 프로젝트에 유용하게 사용되시기 바랍니다. 이것은 나의 첫 번째 기사이며 더 많은 기사가 있습니다. 즐거운 코딩하세요!