[React/JavaScript] 투두 리스트(Todo-List) 만들기 (1)

 

React.js로 투두 리스트를 만들어 봅시다.

 

✅ 프로젝트 생성

npx create-react-app todo

 

todo 라는 이름을 가진 프로젝트를 생성해줍니다.

 

 

터미널에 프로젝트 생성 코드 입력

 

터미널에 코드를 입력한다면 설치가 진행되고 위와 같이 로그가 나오면 프로젝트 생성이 완료된 것을 의미합니다!

 

맨 아래 부분에 있는 코드를 입력하여 프로젝트를 실행해봅시다.

 

cd todo
npm start

 

 

프로젝트 실행 화면

 

 

위와 같은 웹 페이지가 자동으로 열린다면 성공적으로 프로젝트가 실행된 것입니다!

 

 

✅ App.js 수정

우선 기본으로 작성된 App.js 파일을 수정해줍니다.

React는 index.js를 바탕으로 실행되며 index.js 안에서 App.js를 불러와 랜더링하여 화면에 보여집니다.

 

function App() {
  return (
    <>
      <h1>Todo List</h1>
      <form>
        <input id="todo" type="text" />
        <button id="addBtn" type="submit">
          +
        </button>
      </form>
      <ul id="todoBox"></ul>
    </>
  );
}

export default App;

 

위의 코드는 App.js 코드입니다.

 

간단하게 h1 태그로 타이틀을 만들고

새로운 todo를 입력받을 form을 만들어 줍니다.

form 안에는 input과 button으로 이루어져 있습니다.

 

todo를 누적시킬 todoBox인 ul 태그를 만들어줍니다.

 

App.js 수정 후 결과