(react) 컴포넌트로 만들기

<Todo />만들기

vscode의 터미널을 열고 아래과 같이 src폴더 내에 components폴더를 만들고,

다시 그 안에다가 Todo.jsx파일을 만들어 줌.

#src폴더 내에 components폴더 생성
mkdir src/components

#생성된 components폴더에 Todo.jsx파일 생성
#(윈도우의 경우 해당 폴더로 이동해서 echo -n > Todo.jsx와 같이 echo명령어로 작성)
touch src/components/Todo.jsx

 

 

Todo.jsx에 Todo라는 함수를 만든 후

App.jsx파일로 가서 첫번째 <li> ... </li>를 복사하고,

이걸 일단 그대로 Todo.jsx에 붙여줌.

function Todo() {
  return (
    <li className="todo stack-small">
      <div className="c-cb">
        <input id="todo-0" type="checkbox" defaultChecked />
        <label className="todo-label" htmlFor="todo-0">
          Eat
        </label>
      </div>
      <div className="btn-group">
        <button type="button" className="btn">
          Edit <span className="visually-hidden">Eat</span>
        </button>
        <button type="button" className="btn btn__danger">
          Delete <span className="visually-hidden">Eat</span>
        </button>
      </div>
    </li>
  );
}

export default Todo;

 

 

복붙을 완료했다면, 다시 App.jsx로 가서 상단에 아래 import 코드를 작성함.

(참고로 컴포넌트는 항상 무언가를 return을 해줘야 하는데, return하지 않는 component를 만든다면 React는 브라우저에 에러를 표시함.)

그리고 App.js에 있는 모든 <li>를 <Todo />컴포넌트로 바꿔줌~

import Todo from "./components/Todo";

{/* --- 중략 --- */}

<ul
  role="list"
  className="todo-list stack-large stack-exception"
  aria-labelledby="list-heading">
  <Todo />
  <Todo />
  <Todo />
</ul>

 

 

 

페이지를 보면 첫 번째 할일이 반복되는 현상이 생기는데, 

그래서 이제 이걸 컴포넌트를 호출할 때 원하는 내용을 렌더링할 수 있도록 작업해줘야 함~~