React.js로 구현한 온라인 포트폴리오 웹사이트 만들기

09 Nov 2023

reactjs

React.js는 사용하기 쉬운 자바스크립트 라이브러리로, 대화형 UI를 구축하기 위해 사용됩니다. 이번 포스트에서는 React.js를 활용하여 온라인 포트폴리오 웹사이트를 만드는 방법에 대해 알아보겠습니다.

React.js 소개

React.js는 페이스북에서 개발된 오픈 소스 자바스크립트 라이브러리로, 사용자 인터페이스를 구축하기 위해 사용됩니다. React는 컴포넌트 기반 아키텍처를 사용하여 재사용 가능하고 모듈화된 UI 요소를 작성할 수 있습니다. 이러한 특징으로 인해 React는 웹 애플리케이션 개발에 많이 사용되고 있습니다.

온라인 포트폴리오 웹사이트 구현하기

이제 React.js를 사용하여 온라인 포트폴리오 웹사이트를 구현하는 방법에 대해 알아보겠습니다.

1. 프로젝트 세팅

먼저, React.js 프로젝트를 시작하기 위해 create-react-app을 사용하여 프로젝트를 초기화합니다. 아래 명령어를 사용하여 초기 세팅을 진행합니다.

npx create-react-app portfolio
cd portfolio

2. 컴포넌트 구성

포트폴리오 웹사이트에 필요한 컴포넌트를 구성해야 합니다. 예를 들어, 헤더, 프로젝트 목록, 기술 스택 등의 컴포넌트를 생성할 수 있습니다. 각각의 컴포넌트는 재사용 가능하도록 작성해야 합니다.

import React from "react";

const Header = () => {
  return <header>헤더 컴포넌트</header>;
};

export default Header;

import React from "react";

const ProjectList = () => {
  return (
    <div>
      <h3>프로젝트 목록</h3>
      <ul>
        <li>프로젝트 1</li>
        <li>프로젝트 2</li>
        <li>프로젝트 3</li>
      </ul>
    </div>
  );
};

export default ProjectList;

3. 데이터 가져오기

웹사이트에 표시할 데이터를 가져와야 합니다. 이를 위해 API 호출이나 정적 JSON 파일을 사용할 수 있습니다. 데이터 가져오기와 관련된 로직은 useEffect 훅을 사용하여 컴포넌트가 마운트될 때 호출되도록 구현할 수 있습니다.

import React, { useEffect } from "react";

const ProjectList = () => {
  useEffect(() => {
    // 데이터 가져오기 로직
  }, []);

  return (
    // 프로젝트 목록 렌더링
  );
};

export default ProjectList;

4. 렌더링

마지막으로, 컴포넌트를 렌더링하여 웹사이트에 표시합니다. App 컴포넌트에서 필요한 컴포넌트를 불러와서 사용할 수 있습니다.

import React from "react";
import Header from "./Header";
import ProjectList from "./ProjectList";

const App = () => {
  return (
    <div>
      <Header />
      <ProjectList />
    </div>
  );
};

export default App;

결론

위의 단계를 따라가면 React.js를 사용하여 온라인 포트폴리오 웹사이트를 만들 수 있습니다. React의 재사용 가능한 컴포넌트와 컴포넌트 기반 아키텍처를 활용하면 코드의 유지보수성과 확장성을 향상시킬 수 있습니다.

참고 자료

React 공식 문서
React로 웹 포트폴리오 만들기 #React #웹포트폴리오

목차