자바스크립트와 React.js로 단어장 애플리케이션 만들기

09 Nov 2023

reactjs

안녕하세요! 이번에는 자바스크립트와 React.js를 사용하여 단어장 애플리케이션을 만드는 방법에 대해 알아보겠습니다. 단어장 애플리케이션은 사용자가 단어를 추가하고, 검색하고, 수정하며 삭제할 수 있는 기능을 제공하는 앱입니다. 이제 우리는 이를 자바스크립트와 React.js로 구현해 보겠습니다.

프로젝트 설정

먼저, React.js 프로젝트를 설정하겠습니다. 이를 위해 create-react-app 명령어를 사용할 수 있습니다. 터미널에서 다음 명령어를 실행하여 새로운 React.js 프로젝트를 생성합니다.

npx create-react-app word-app

프로젝트가 생성되면, 해당 디렉토리로 이동하여 프로젝트를 실행할 수 있습니다.

cd word-app
npm start

컴포넌트 생성

우선, 프로젝트에 필요한 컴포넌트들을 생성해야 합니다. src 폴더 내에 components 폴더를 생성하고, 그 안에 WordList.js, SearchBar.js, AddWordForm.js, Word.js 파일들을 생성합니다.

WordList 컴포넌트

WordList.js 파일을 열고, 다음과 같이 컴포넌트를 작성합니다.

import React from 'react';

const WordList = () => {
  const words = [
    { id: 1, word: 'apple', definition: '사과' },
    { id: 2, word: 'banana', definition: '바나나' },
    { id: 3, word: 'cherry', definition: '체리' },
  ];

  return (
    <div>
      {words.map((word) => (
        <div key={word.id}>
          <h3>{word.word}</h3>
          <p>{word.definition}</p>
        </div>
      ))}
    </div>
  );
};

export default WordList;

SearchBar 컴포넌트

SearchBar.js 파일을 열고, 다음과 같이 컴포넌트를 작성합니다.

import React from 'react';

const SearchBar = () => {
  return (
    <div>
      <input type="text" placeholder="검색어를 입력하세요" />
      <button>검색</button>
    </div>
  );
};

export default SearchBar;

AddWordForm 컴포넌트

AddWordForm.js 파일을 열고, 다음과 같이 컴포넌트를 작성합니다.

import React from 'react';

const AddWordForm = () => {
  return (
    <form>
      <input type="text" placeholder="단어를 입력하세요" />
      <input type="text" placeholder="뜻을 입력하세요" />
      <button>추가</button>
    </form>
  );
};

export default AddWordForm;

Word 컴포넌트

Word.js 파일을 열고, 다음과 같이 컴포넌트를 작성합니다.

import React from 'react';

const Word = ({ word, definition }) => {
  return (
    <div>
      <h3>{word}</h3>
      <p>{definition}</p>
    </div>
  );
};

export default Word;

App.js 작성

이제 App.js 파일을 열고, 작성된 컴포넌트들을 사용하여 애플리케이션을 구성합니다.

import React from 'react';
import WordList from './components/WordList';
import SearchBar from './components/SearchBar';
import AddWordForm from './components/AddWordForm';

const App = () => {
  return (
    <div>
      <h1>단어장 애플리케이션</h1>
      <SearchBar />
      <WordList />
      <AddWordForm />
    </div>
  );
};

export default App;

프로젝트 실행

이제 모든 설정과 컴포넌트 작성이 완료되었습니다. 터미널에서 npm start 명령어를 사용하여 프로젝트를 실행합니다. 그리고 브라우저에서 http://localhost:3000에 접속하여 단어장 애플리케이션을 확인할 수 있습니다.

마치며

이번에는 자바스크립트와 React.js를 사용하여 단어장 애플리케이션을 만드는 방법에 대해 알아보았습니다. 이 애플리케이션은 단어를 추가하고, 검색하고, 수정하며 삭제할 수 있는 기능을 제공합니다. React.js의 컴포넌트 기반 구조를 활용하여 사용자 인터페이스를 구성하였고, 컴포넌트들 간의 상호작용을 구현하였습니다.

코드와 프로젝트에 대한 자세한 내용은 GitHub 저장소에서 확인할 수 있습니다.

#reactjs #javascript