투두 리스트 만들기

아마도 지금이 제일 고비인 것 같다.

 

투두 리스트를 만들기 위해서는 현재 내가 알고 있는 지식으로는 턱없이 부족한 상태이다..

 

하지만 사람은 해야할 때 해내야한다... 무슨 방법을 쓰더라도...

 

시간을 갈아 넣는 것은 디폴트이다.

 

 

1. 리액트 시작. 

npx create-react-app .

 

2. 프로젝트 실행

npm start

 

3. 투두리스트 컴포넌트 생성

src 폴더에 components 폴더 생성이후

TodoList.js 파일 생성.

 

4. TodoList.js 컴포넌트 코드 작성

import React from 'react';

const TodoList = () => {
  return (
    <div>
      <h1>Todo List</h1>
      {/* 투두리스트 내용을 작성하세요 */}
    </div>
  );
}

export default TodoList;

import와 export는 알고 있다 !!!

import는 가져오기

export는 내보내기 !

아무리 나의 지식이 부족하다고 해도 이정도는 안다......

 

 

5. App.js 수정 

투두리스트 컴포넌트를 렌더링 할 수 있도록 App.js를 수정해야한다.

 

import React from 'react';
import TodoList from './components/TodoList';

const App = () => {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}

export default App;

 

 

---

여기까지 일단 하면.

http://localhost:3000/로 접속해보자.

캬 !!!!!!!!!!!

 

처음 html 배웠을 때가 생각난다.

 

이제 힘내서 투두리스트 기능을 마구마구 추가해보자

 

참고로 리액트는 여태까지 index.html에 코드를 작성하는 방식이 아닌.

처음 리액트 앱을 생성하면 public 안에 index.html 파일이 생성 되는데,

 

이 파일에 코드를 작성하지 않고,

실제 코드는 src에 component에 작성한다..!