23.06.14) React를 이용해서 Todo List 만들기(1)

💻구현해야 할 기능

• UI 구현하기
• Todo 추가 하기
• Todo 삭제 하기
• Todo 완료 상태 변경하기 (완료 ↔ 진행중)

 

🤓오늘 공부한 내용

react파일을 설치하는 방법이 두가지가 있는데 git bash에서 yarn을 설치하는 방법도 있지만

이번에는 터미널에서 설치하는 방법을 사용해보고자

'npx create-react-app (파일이름)' 명령어를 이용해서 설치했다.

파일을 설치해주고 난 후 App.js에서 기존에 있던 컴포넌트 부분을 지워서 준비해준다.

 

📌Todo List페이지의 기본 뼈대 먼저 세팅

const App = () => {
  return (
    <div className="layout">
      <div className="app-title">
        <div>My Todo List</div> <div>React</div>
      </div>
      <div className="input-group">
        <b>제목</b> <input className="input-style" type="text" />
        <b>내용</b> <input className="input-style" type="text" />
      </div>
      <button className="add-button">추가하기</button>
      <div className="list">
        <h2>📌Working</h2>
        <h2>✅Done</h2>
      </div>
    </div>
  );
};

• 페이지의 타이틀 <div className="app-title"> 
• todo 리스트를 추가하기 위한 입력창 <input> 생성 + 추가하기 <button> 생성
• 추가된 todo가 나타날 수 있도록  <div className="list"> 생성

 

📌State 연결하기

1. retrun문 위에 예시 객체를 품은 배열을 만들어준다

const todo= [
    { id: 1, title: "오늘 할일", content: "리액트 기초 공부하기"},
    { id: 2, title: "오늘 할일", content: "마트가서 장 보기"},
  ];

2. map함수를 이용해서 공통적인 부분을 로직으로 만들어서 사용

        <h2>📌Working</h2>
        <div className="list-wrap">
          {
          todo.map((item) => (
            <div key={item.id} className="list-style">
              <h2>{item.title}</h2>
              <div>{item.content}</div>
            </div>
          ))
          }
        </div>

• 자바스크립트이기 때문에 { }안에 추가하기
• 배열의 이름 todo에 map함수 (화살표함수)적용

    ▷ JSX 문법에서는 return 키워드를 사용하지 않고도 중괄호 {}로 감싸진 코드 블록에서 JSX를 반환

    ▷ 화살표 함수 내부의 내용이 반환값(return)만 존재한다면 {}와 return키워드 생략 가능

    ▷ 멀티라인은 ( )로 감싸서 리턴

• key={item.id} : map함수 사용시 항상 리스트에 있는 모든 i는 key라는 prop이 필요

   ▷ jsx엘리먼트에서 어떤 속성을 내려줄 때 필요함

   ▷ 즉 map함수를 쓸 때 반복적으로 리턴하는 요소에는 id를 붙여준다

 

3. 렌더링 하기 (단순 배열 상수를 state로 변경)

const [todo, setTodo] = useState([
    { id: 1, title: "오늘 할일", content: "리액트 기초 공부하기"},
    { id: 2, title: "오늘 할일", content: "마트가서 장 보기"},
  ]);

• 리스트를 추가하기 위해서는 렌더링이 다시 돼야하는데 그러기 위해서는 배열을 state로 변경해야 한다.

  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");

• <input>의 제목과 내용을 사용하기 위해서 title과 content의 state를 만들어준다.
• 제목과 내용이 타이핑 될 때 마다 state에 세팅이 된다 (state 연결해주기)

  const titleChangeHandler = (event) => {setTitle(event.target.value)};

  const contentChangeHandler = (event) => {setContent(event.target.value)};

• event를 인자로 받는다.
• 이벤트핸들러를 따로 변수로 할당해주기

<div className="input-group">
 <b>제목</b> <input className="input-style" type="text" value={title} onChange={titleChangeHandler} />
 <b>내용</b> <input className="input-style" type="text" value={content} onChange={contentChangeHandler}/>
</div>

• value - onChange pair

  ▷ value값 넣어주기

  ▷ <input>에 인라인으로 할당하지 않기 위해 변수로 만든 'titleChangeHandler' 값 onChange에 넣어주기

  ▷ contentChangeHandler도 동일